> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Components

> Complete form component library including inputs, selects, checkboxes, and more

Theme UI provides a comprehensive set of form components with consistent styling and theme integration.

## Components

* [Input](#input)
* [Select](#select)
* [Textarea](#textarea)
* [Label](#label)
* [Checkbox](#checkbox)
* [Radio](#radio)
* [Switch](#switch)
* [Slider](#slider)

## Import

```jsx theme={null}
import {
  Input,
  Select,
  Textarea,
  Label,
  Checkbox,
  Radio,
  Switch,
  Slider,
} from 'theme-ui'
```

***

## Input

Text input component with theme variants.

### Usage

```jsx theme={null}
<Input placeholder="Enter text" />
```

### Props

<ParamField path="variant" type="string" default="'input'">
  Input variant from `theme.forms`.

  ```jsx theme={null}
  <Input variant="input" />
  <Input variant="search" />
  ```
</ParamField>

<ParamField path="autofillBackgroundColor" type="string" default="'background'">
  Background color for autofilled inputs. Maps to theme colors.

  ```jsx theme={null}
  <Input autofillBackgroundColor="muted" />
  ```
</ParamField>

<ParamField path="type" type="string">
  HTML input type (text, email, password, etc.).

  ```jsx theme={null}
  <Input type="email" placeholder="Email" />
  <Input type="password" placeholder="Password" />
  ```
</ParamField>

### Examples

```jsx theme={null}
{/* Basic input */}
<Input placeholder="Your name" />

{/* Email input */}
<Input type="email" placeholder="email@example.com" />

{/* With label */}
<Label>
  Email
  <Input type="email" />
</Label>

{/* Custom styling */}
<Input
  sx={{
    borderColor: 'primary',
    '&:focus': {
      borderColor: 'secondary',
      outline: 'none',
    },
  }}
/>
```

***

## Select

Dropdown select component with custom arrow indicator.

### Usage

```jsx theme={null}
<Select>
  <option>Option 1</option>
  <option>Option 2</option>
</Select>
```

### Props

<ParamField path="variant" type="string" default="'select'">
  Select variant from `theme.forms`.
</ParamField>

<ParamField path="arrow" type="React.ReactElement">
  Custom arrow element to replace the default down arrow.

  ```jsx theme={null}
  <Select arrow={<CustomArrow />}>
    <option>Option</option>
  </Select>
  ```
</ParamField>

### Examples

```jsx theme={null}
{/* Basic select */}
<Select>
  <option>Choose one</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

{/* With label */}
<Label>
  Country
  <Select>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
  </Select>
</Label>
```

***

## Textarea

Multi-line text input component.

### Usage

```jsx theme={null}
<Textarea placeholder="Enter longer text" />
```

### Props

<ParamField path="variant" type="string" default="'textarea'">
  Textarea variant from `theme.forms`.
</ParamField>

<ParamField path="rows" type="number">
  Number of visible text rows.

  ```jsx theme={null}
  <Textarea rows={5} />
  ```
</ParamField>

### Examples

```jsx theme={null}
{/* Basic textarea */}
<Textarea placeholder="Your message" />

{/* With label */}
<Label>
  Message
  <Textarea rows={4} />
</Label>

{/* Custom height */}
<Textarea sx={{ minHeight: 200 }} />
```

***

## Label

Form label component for accessibility.

### Usage

```jsx theme={null}
<Label>
  Field Name
  <Input />
</Label>
```

### Props

<ParamField path="htmlFor" type="string">
  Associates label with an input by ID.

  ```jsx theme={null}
  <Label htmlFor="email">Email</Label>
  <Input id="email" />
  ```
</ParamField>

<ParamField path="variant" type="string" default="'label'">
  Label variant from `theme.forms`.
</ParamField>

### Examples

```jsx theme={null}
{/* Wrapping input */}
<Label>
  Username
  <Input />
</Label>

{/* Using htmlFor */}
<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" />

{/* Inline label */}
<Label sx={{ display: 'inline-flex', alignItems: 'center' }}>
  <Checkbox />
  I agree to terms
</Label>
```

***

## Checkbox

Checkbox input with custom styled appearance.

### Usage

```jsx theme={null}
<Label>
  <Checkbox />
  Accept terms
</Label>
```

### Props

<ParamField path="variant" type="string" default="'checkbox'">
  Checkbox variant from `theme.forms`.
</ParamField>

<ParamField path="checked" type="boolean">
  Controlled checked state.
</ParamField>

<ParamField path="defaultChecked" type="boolean">
  Default checked state (uncontrolled).
</ParamField>

### Examples

```jsx theme={null}
{/* Basic checkbox */}
<Label>
  <Checkbox /> Subscribe to newsletter
</Label>

{/* Controlled checkbox */}
<Label>
  <Checkbox checked={isChecked} onChange={e => setIsChecked(e.target.checked)} />
  Toggle me
</Label>

{/* Multiple checkboxes */}
<Box>
  <Label><Checkbox /> Option 1</Label>
  <Label><Checkbox /> Option 2</Label>
  <Label><Checkbox /> Option 3</Label>
</Box>
```

***

## Radio

Radio button input with custom styled appearance.

### Usage

```jsx theme={null}
<Label>
  <Radio name="group" />
  Option 1
</Label>
```

### Props

<ParamField path="name" type="string">
  Radio group name. Required to link radio buttons together.
</ParamField>

<ParamField path="variant" type="string" default="'radio'">
  Radio variant from `theme.forms`.
</ParamField>

<ParamField path="checked" type="boolean">
  Controlled checked state.
</ParamField>

<ParamField path="value" type="string">
  Radio button value.
</ParamField>

### Examples

```jsx theme={null}
{/* Radio group */}
<Box>
  <Label>
    <Radio name="plan" value="basic" />
    Basic Plan
  </Label>
  <Label>
    <Radio name="plan" value="pro" />
    Pro Plan
  </Label>
  <Label>
    <Radio name="plan" value="enterprise" />
    Enterprise
  </Label>
</Box>

{/* Controlled radio */}
<Label>
  <Radio
    name="size"
    value="large"
    checked={size === 'large'}
    onChange={e => setSize(e.target.value)}
  />
  Large
</Label>
```

***

## Switch

Toggle switch component for binary choices.

### Usage

```jsx theme={null}
<Switch label="Enable notifications" />
```

### Props

<ParamField path="label" type="string">
  Label text for the switch.

  ```jsx theme={null}
  <Switch label="Dark mode" />
  ```
</ParamField>

<ParamField path="variant" type="string" default="'switch'">
  Switch variant from `theme.forms`.
</ParamField>

<ParamField path="checked" type="boolean">
  Controlled checked state.
</ParamField>

<ParamField path="disabled" type="boolean">
  Disable the switch.
</ParamField>

### Examples

```jsx theme={null}
{/* Basic switch */}
<Switch label="Enable feature" />

{/* Controlled switch */}
<Switch
  label="Dark mode"
  checked={darkMode}
  onChange={e => setDarkMode(e.target.checked)}
/>

{/* Disabled switch */}
<Switch label="Feature disabled" disabled />
```

***

## Slider

Range slider input component.

### Usage

```jsx theme={null}
<Slider />
```

### Props

<ParamField path="variant" type="string" default="'slider'">
  Slider variant from `theme.forms`.
</ParamField>

<ParamField path="min" type="number" default="0">
  Minimum value.
</ParamField>

<ParamField path="max" type="number" default="100">
  Maximum value.
</ParamField>

<ParamField path="step" type="number" default="1">
  Step increment.
</ParamField>

<ParamField path="value" type="number">
  Controlled value.
</ParamField>

<ParamField path="defaultValue" type="number">
  Default value (uncontrolled).
</ParamField>

### Examples

```jsx theme={null}
{/* Basic slider */}
<Label>
  Volume
  <Slider />
</Label>

{/* Custom range */}
<Slider min={0} max={10} step={0.5} />

{/* Controlled slider */}
<Box>
  <Label>Brightness: {brightness}%</Label>
  <Slider
    value={brightness}
    onChange={e => setBrightness(e.target.value)}
  />
</Box>

{/* With display value */}
<Box>
  <Flex sx={{ justifyContent: 'space-between', mb: 2 }}>
    <Text>Price</Text>
    <Text>${price}</Text>
  </Flex>
  <Slider
    min={0}
    max={1000}
    value={price}
    onChange={e => setPrice(e.target.value)}
  />
</Box>
```

***

## Form Example

Complete form example using multiple components:

```jsx theme={null}
<Box as="form" onSubmit={handleSubmit}>
  <Label htmlFor="name">
    Name
    <Input id="name" name="name" required />
  </Label>
  
  <Label htmlFor="email">
    Email
    <Input id="email" name="email" type="email" required />
  </Label>
  
  <Label htmlFor="country">
    Country
    <Select id="country" name="country">
      <option>United States</option>
      <option>Canada</option>
      <option>Other</option>
    </Select>
  </Label>
  
  <Label htmlFor="message">
    Message
    <Textarea id="message" name="message" rows={4} />
  </Label>
  
  <Label>
    <Checkbox name="newsletter" />
    Subscribe to newsletter
  </Label>
  
  <Label>
    <Switch label="Send me updates" name="updates" />
  </Label>
  
  <Button type="submit">Submit</Button>
</Box>
```