Form Input

The form input allows you to create various text style inputs such as text, password, email, number, url, search and more.

Form Input

The FormInput component is a text input by default. However, you can set its type prop to one of the supported types as well: password, email, number, url, tel, search, date, datetime, datetime-local, month, week, time.

import React from "react";
import { FormInput } from "shards-react";

export default function FormInputExample() {
  return <FormInput placeholder="My form input" />;
}

Sizing

Using the size prop, you can change the input size as small (sm) or large (lg).

import React from "react";
import { FormInput } from "shards-react";

export default function FormInputSizeExample() {
  return (
    <div>
      <FormInput size="sm" placeholder="Small input" className="mb-2" />
      <FormInput placeholder="Normal input" className="mb-2" />
      <FormInput size="lg" placeholder="Large input" />
    </div>
  );
}

Validation States

Using the valid or invalid props you can control the input's validation state.

import React from "react";
import { FormInput } from "shards-react";

export default function FormValidationStateExample() {
  return (
    <div>
      <FormInput placeholder="I'm neutral" className="mb-2" />
      <FormInput valid placeholder="I'm valid" className="mb-2" />
      <FormInput invalid placeholder="I'm invalid" />
    </div>
  );
}

Props

The following props are available for the Form Input component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
inline	Whether it is inline, or not.	`Bool`	-	No
type	The input type.	`Enum`	-	No
plaintext	Whether it is plaintext, or not.	`Bool`	-	No
size	The input's size.	`String`	-	No
valid	Whether it is valid, or not.	`Bool`	-	No
invalid	Whether it is invalid, or not.	`Bool`	-	No
innerRef	The inner ref.	`ObjectFuncString`	-	No