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.

Description with no validation
* Hint with validation
<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.

Min:
Max:
* Enter a price range
<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>
Minimum 8 characters
<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.

PropTypeDescriptionDefault
sizeFormControlSizeSets the form control sizemd
validationFormControlValidationSets the validation statenone

FormControl.Label

PropTypeDescriptionDefault
requiredbooleanMarks the label as requiredfalse

FormControl.Text

PropTypeDescriptionDefault
validationFormControlTextValidationSets the validation statenone

Types

type FormControlSize = 'xs' | 'sm' | 'md' | 'lg';
type FormControlValidation = 'none' | 'invalid' | 'valid' | 'warning';
type FormControlTextValidation = 'none' | 'invalid' | 'valid' | 'warning';