FormControl
A wrapper component for all form components to add labels, descriptions and hints.
The FormControl component is a bootstrap style component that enables the developer to give more information to the end user by adding supportive labels, descriptions and text to form components.
import { FormControl } from '@rewind-ui/core';
import { At } from '@phosphor-icons/react';
function App() {
return (
<FormControl>
<FormControl.Label>
Email address
</FormControl.Label>
<FormControl.Input
leftIcon={<At className="text-gray-500" />}
type="email"
placeholder="An email address"
/>
</FormControl>
);
}
Import
Import the FormControl
component using the following import statement.
import { FormControl } from '@rewind-ui/core';
Sizes
The following size
options are supported: xs
, sm
, md
and lg
.
<View>
<FormControl size="xs">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'Extra small...'} />
</FormControl>
<FormControl size="sm">
<FormControl.Label>Email address</FormControl.Label>
<FormControlInput placeholder={'Small...'} />
</FormControl>
<FormControl size="md">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'Medium...'} />
</FormControl>
<FormControl size="lg">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'Large...'} />
</FormControl>
</View>
Validation
The following validation
options are supported: none
, invalid
, valid
and warning
.
<View>
<FormControl validation="none">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'None...'} />
</FormControl>
<FormControl validation="invalid">
<FormControl.Label>Email address</FormControl.Label>
<FormControlInput placeholder={'Invalid...'} />
</FormControl>
<FormControl validation="valid">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'Valid...'} />
</FormControl>
<FormControl validation="warning">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Input placeholder={'Warning...'} />
</FormControl>
</View>
All FormControl.Text
elements will inherit the validation state of the FormControl
component. To exclude a FormControl.Text
element from inheriting the validation state, set the validation
prop to none
.
<View>
<FormControl className="min-w-[300px]" validation="invalid">
<FormControl.Label>Email address</FormControl.Label>
<FormControl.Text validation="none">Description with no validation</FormControl.Text>
<FormControl.Input placeholder={'Enter an email address...'} />
<FormControl.Text>* Hint with validation</FormControl.Text>
</FormControl>
</View>
Required
The FormControl.Label
component can be marked as required by adding the required
prop.
<View>
<FormControl className="min-w-[300px]">
<FormControl.Label required>Email address</FormControl.Label>
<FormControl.Input placeholder={'Required email address...'} />
</FormControl>
</View>
Control ID
The FormControl
component automatically generates an id for the form (Input
, Select
, Combobox
and Textarea
) elements and assigns its value to the htmlFor
attribute of the FormControl.Label
component. This allows the user to click on the label to focus the form element.
Examples
Input Group
The FormControl
component can be combined with InputGroup
component.
<View>
<FormControl>
<FormControl.Label>Price</FormControl.Label>
<InputGroup>
<InputGroup.Text>Min:</InputGroup.Text>
<InputGroup.Input type="number" />
<InputGroup.Text>Max:</InputGroup.Text>
<InputGroup.Input type="number" />
</InputGroup>
<FormControl.Text className="text-gray-400">* Enter a price range</FormControl.Text>
</FormControl>
</View>
<View>
<FormControl>
<FormControl.Label>Password</FormControl.Label>
<FormControl.Text>Minimum 8 characters</FormControl.Text>
<InputGroup>
<InputGroup.Text><Key weight="duotone" /></InputGroup.Text>
<InputGroup.Input placeholder={'Type a password...'} type="password" />
</InputGroup>
</FormControl>
</View>
Select
The FormControl
component can be combined with Select
component.
<View>
<FormControl className="min-w-[300px]">
<FormControl.Label>Gender</FormControl.Label>
<FormControl.Select>
<option value="male">Male</option>
<option value="female">Female</option>
</FormControl.Select>
</FormControl>
</View>
Combobox
The FormControl
component can be combined with Combobox
component.
<View>
<FormControl className="min-w-[300px]">
<FormControl.Label>Search</FormControl.Label>
<FormControl.Combobox initialValue="1">
<FormControl.Combobox.Option value="1" label="Item 1" />
<FormControl.Combobox.Option value="2" label="Item 2" />
<FormControl.Combobox.Option value="3" label="Item 3" />
</FormControl.Combobox>
</FormControl>
</View>
Textarea
The FormControl
component can be combined with Textarea
component.
<View>
<FormControl className="min-w-[300px]">
<FormControl.Label>Comment</FormControl.Label>
<FormControl.Textarea placeholder="Type your comment..." />
</FormControl>
</View>
API Reference
Properties
FormControl
All available properties are automatically inherited to all child components.
Prop | Type | Description | Default |
---|---|---|---|
size | FormControlSize | Sets the form control size | md |
validation | FormControlValidation | Sets the validation state | none |
FormControl.Label
Prop | Type | Description | Default |
---|---|---|---|
required | boolean | Marks the label as required | false |
FormControl.Text
Prop | Type | Description | Default |
---|---|---|---|
validation | FormControlTextValidation | Sets the validation state | none |
Types
type FormControlSize = 'xs' | 'sm' | 'md' | 'lg';
type FormControlValidation = 'none' | 'invalid' | 'valid' | 'warning';
type FormControlTextValidation = 'none' | 'invalid' | 'valid' | 'warning';