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.

Source code

Theme

Storybook

Email address

Size

Validation

import { FormControl } from '@almond-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 '@almond-ui/core';

Sizes

The following size options are supported: xs, sm, md and lg.

Email address

<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.

Email address

<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.

Email address

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.

Email address

<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.

Price

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>

Password

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.

Gender

<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.

Comment

<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';

Combobox Input