Form Components - Theme UI

Theme UI provides a comprehensive set of form components with built-in styling and theme integration.

Input

The Input component is a text input field with theme-aware styling.

Import

import { Input } from '@theme-ui/components'

Usage

<Input placeholder="Enter text..." />

Props

string

default:"'background'"

Theme color key for autofill background color

string

default:"'input'"

Form variant from theme.forms

Input accepts all standard HTML input attributes and Box props.

Default Styles

{
  display: 'block',
  width: '100%',
  p: 2,
  appearance: 'none',
  fontSize: 'inherit',
  lineHeight: 'inherit',
  border: '1px solid',
  borderRadius: 4,
  color: 'inherit',
  bg: 'transparent'
}

Examples

<Input type="text" placeholder="Name" mb={3} />
<Input type="email" placeholder="Email" mb={3} />
<Input type="password" placeholder="Password" />

Textarea

The Textarea component is a multi-line text input.

Import

import { Textarea } from '@theme-ui/components'

Usage

<Textarea rows={4} placeholder="Enter message..." />

Props

string

default:"'textarea'"

Form variant from theme.forms

Textarea accepts all standard HTML textarea attributes and Box props.

Default Styles

{
  display: 'block',
  width: '100%',
  p: 2,
  appearance: 'none',
  fontSize: 'inherit',
  lineHeight: 'inherit',
  border: '1px solid',
  borderRadius: 4,
  color: 'inherit',
  bg: 'transparent',
  fieldSizing: 'content'
}

Examples

<Textarea 
  rows={6}
  placeholder="Enter your message..."
  sx={{ resize: 'vertical' }}
/>

Select

The Select component is a dropdown select field with a custom arrow icon.

Import

import { Select } from '@theme-ui/components'

Usage

<Select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</Select>

Props

React.ReactElement

Custom arrow icon element (default is a down chevron)

string

default:"'select'"

Form variant from theme.forms

Select accepts all standard HTML select attributes and Box props.

Default Styles

{
  display: 'block',
  width: '100%',
  p: 2,
  paddingRight: 4,
  appearance: 'none',
  fontSize: 'inherit',
  lineHeight: 'inherit',
  border: '1px solid',
  borderRadius: 4,
  color: 'inherit',
  backgroundColor: 'background'
}

Examples

<Select defaultValue="option2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

Label

The Label component is used to label form inputs.

Import

import { Label } from '@theme-ui/components'

Usage

<Label htmlFor="name">Name</Label>
<Input id="name" />

Props

string

default:"'label'"

Form variant from theme.forms

Label accepts all standard HTML label attributes and Box props.

Default Styles

{
  width: '100%',
  display: 'flex'
}

Examples

<Label htmlFor="email" mb={2}>Email Address</Label>
<Input id="email" type="email" />

Checkbox

The Checkbox component is a styled checkbox input with custom icons.

Import

import { Checkbox } from '@theme-ui/components'

Usage

<Label>
  <Checkbox />
  Accept terms and conditions
</Label>

Props

string

default:"'checkbox'"

Form variant from theme.forms

Checkbox accepts all standard HTML input checkbox attributes and Box props.

Default Styles

The checkbox uses custom SVG icons for checked and unchecked states:

{
  mr: 2,
  borderRadius: 4,
  color: 'gray',
  flexShrink: 0,
  'input:checked ~ &': {
    color: 'primary'
  },
  'input:focus ~ &': {
    color: 'primary',
    bg: 'highlight'
  }
}

Examples

<Label>
  <Checkbox defaultChecked />
  Subscribe to newsletter
</Label>

<Label>
  <Checkbox />
  I agree to the terms
</Label>

Radio

The Radio component is a styled radio input with custom icons.

Import

import { Radio } from '@theme-ui/components'

Usage

<Label>
  <Radio name="choice" value="a" />
  Option A
</Label>
<Label>
  <Radio name="choice" value="b" />
  Option B
</Label>

Props

string

default:"'radio'"

Form variant from theme.forms

Radio accepts all standard HTML input radio attributes and Box props.

Default Styles

The radio uses custom SVG icons for checked and unchecked states:

{
  mr: 2,
  borderRadius: 9999,
  color: 'gray',
  flexShrink: 0,
  'input:checked ~ &': {
    color: 'primary'
  },
  'input:focus ~ &': {
    bg: 'highlight'
  }
}

Examples

<Box>
  <Label mb={2}>
    <Radio name="size" value="small" defaultChecked />
    Small
  </Label>
  <Label mb={2}>
    <Radio name="size" value="medium" />
    Medium
  </Label>
  <Label>
    <Radio name="size" value="large" />
    Large
  </Label>
</Box>

Switch

The Switch component is a toggle switch input.

Import

import { Switch } from '@theme-ui/components'

Usage

<Switch label="Enable notifications" />

Props

string

Label text for the switch

string

default:"'switch'"

Form variant from theme.forms

Switch accepts all standard HTML input checkbox attributes and Box props.

Default Styles

{
  position: 'relative',
  flexShrink: 0,
  bg: 'gray',
  borderRadius: 18,
  height: 22,
  width: 44,
  mr: 2,
  'input:checked ~ &': {
    bg: 'primary'
  }
}

Examples

<Switch label="Dark mode" />
<Switch label="Enable feature" defaultChecked />

Slider

The Slider component is a range input slider.

Import

import { Slider } from '@theme-ui/components'

Usage

<Slider min={0} max={100} defaultValue={50} />

Props

string

default:"'slider'"

Form variant from theme.forms

Slider accepts all standard HTML input range attributes and Box props.

Default Styles

{
  display: 'block',
  width: '100%',
  height: 4,
  my: 2,
  cursor: 'pointer',
  appearance: 'none',
  borderRadius: 9999,
  color: 'inherit',
  bg: 'gray',
  ':focus': {
    outline: 'none',
    color: 'primary'
  }
}

Examples

<Box>
  <Label>Volume</Label>
  <Slider min={0} max={100} defaultValue={75} />
</Box>

<Box>
  <Label>Opacity</Label>
  <Slider min={0} max={1} step={0.1} defaultValue={0.5} />
</Box>

Field

The Field component combines a Label and an input control into a single component.

Import

import { Field } from '@theme-ui/components'

Usage

<Field label="Email" name="email" type="email" />

Props

string

Text for the Label component

string

Used for the name, id, and htmlFor attributes

React.ElementType

default:"Input"

Form control component to render (Input, Textarea, Select, etc.)

Field accepts all props of the control component specified by the as prop.

Examples

Text Input Field

<Field 
  label="Full Name" 
  name="name" 
  placeholder="John Doe"
  mb={3}
/>

Textarea Field

<Field 
  label="Message" 
  name="message" 
  as={Textarea}
  rows={4}
  mb={3}
/>

Select Field

<Field 
  label="Country" 
  name="country" 
  as={Select}
  mb={3}
>
  <option>United States</option>
  <option>Canada</option>
  <option>Mexico</option>
</Field>

Complete Form Example

Here’s a complete form using multiple form components:

<Box as="form" onSubmit={handleSubmit}>
  <Field 
    label="Name" 
    name="name" 
    placeholder="Your name"
    mb={3}
  />
  
  <Field 
    label="Email" 
    name="email" 
    type="email"
    placeholder="your@email.com"
    mb={3}
  />
  
  <Field 
    label="Country" 
    name="country" 
    as={Select}
    mb={3}
  >
    <option>Select a country</option>
    <option>United States</option>
    <option>Canada</option>
  </Field>
  
  <Box mb={3}>
    <Label>Notification Preferences</Label>
    <Label mt={2}>
      <Checkbox name="email-notifications" />
      Email notifications
    </Label>
    <Label mt={2}>
      <Checkbox name="sms-notifications" />
      SMS notifications
    </Label>
  </Box>
  
  <Field 
    label="Message" 
    name="message" 
    as={Textarea}
    rows={4}
    mb={3}
  />
  
  <Button type="submit">Submit</Button>
</Box>

​Input

​Import

​Usage

​Props

​Default Styles

​Examples

​Textarea

​Import

​Usage

​Props

​Default Styles

​Examples

​Select

​Import

​Usage

​Props

​Default Styles

​Examples

​Label

​Import

​Usage

​Props

​Default Styles

​Examples

​Checkbox

​Import

​Usage

​Props

​Default Styles

​Examples

​Radio

​Import

​Usage

​Props

​Default Styles

​Examples

​Switch

​Import

​Usage

​Props

​Default Styles

​Examples

​Slider

​Import

​Usage

​Props

​Default Styles

​Examples

​Field

​Import

​Usage

​Props

​Examples

​Text Input Field

​Textarea Field

​Select Field

​Complete Form Example

Input

Import

Usage

Props

Default Styles

Examples

Textarea

Import

Usage

Props

Default Styles

Examples

Select

Import

Usage

Props

Default Styles

Examples

Label

Import

Usage

Props

Default Styles

Examples

Checkbox

Import

Usage

Props

Default Styles

Examples

Radio

Import

Usage

Props

Default Styles

Examples

Switch

Import

Usage

Props

Default Styles

Examples

Slider

Import

Usage

Props

Default Styles

Examples

Field

Import

Usage

Props

Examples

Text Input Field

Textarea Field

Select Field

Complete Form Example