Form Control

This page introduces a few helper components that can be used to create form controls.

  • <Label>
  • <Caption>
  • <Validation>
  • <FormControl>
  • <InputGroup>

These components are used in the Split Control component along with other components like Text Input, Checkbox, etc.

Label and Caption

<Label for="input-id">Name</Label>
<Caption>Enter your name</Caption>
Enter your name

Validation

<Validation state="error">This field is required</Validation>
<Validation state="warning">This is irreversible</Validation>
<Validation state="success">Email sent</Validation>

Full Form Control

The <FormControl> component can be used to wrap label, caption, validation, and other inputs. It will automatically add spacing between the elements.

<FormControl>
    <Label for="input-id">Name</Label>
    <Caption>Enter your name</Caption>
    <TextInput type="text" id="input-id" state="error" />
    <Validation state="error">This field is required</Validation>
</FormControl>
Enter your name

Input Group

The <InputGroup> component can be used to group multiple inputs together. It will automatically add spacing between the elements. It can be used to group checkboxes, radio buttons, text inputs, etc.

<FormControl>
    <Label for="input-id">Email Preferences</Label>
    <Caption>When to receive emails</Caption>
    <InputGroup>
        <Checkbox>on replies</Checkbox>
        <Checkbox>on mentions</Checkbox>
    </InputGroup>
</FormControl>
When to receive emails