Form

Examples and usage guidelines for form controls.

Basic Example

Forms can be created using the Form component.

import React from "react";
import { Form, FormInput, FormGroup } from "shards-react";

export default function FormExample() {
  return (
    <Form>
      <FormGroup>
        <label htmlFor="#username">Username</label>
        <FormInput id="#username" placeholder="Username" />
      </FormGroup>
      <FormGroup>
        <label htmlFor="#password">Password</label>
        <FormInput type="password" id="#password" placeholder="Password" />
      </FormGroup>
    </Form>
  );
}

Props

The following props are available for the Form component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
inline	Whether it is inline, or not.	`Bool`	-	No
children	The children nodes.	`Array[Node]Node`	-	No
innerRef	The inner ref.	`ObjectFuncString`	-	No
tag	The component's tag type.	`FuncString`	`"form"`	No

Subcomponents

The following subcomponents are available for the Form component.

<FormFeedback/>

Prop	Description	Type	Default	Required
children	The children.	`Node`	-	No
tag	The tag type.	`String`	`"div"`	No
className	The class name.	`String`	-	No
valid	Whether the feedback is valid, or not.	`Bool`	`undefined`	No
tooltip	Whether the feedback should be displayed as tooltip.	`Bool`	-	No