Skip to content
Theme UI
GitHub

Forms

Several primitive components are included for building accessible forms.

import {
Label,
Input,
Select,
Textarea,
Radio,
Checkbox,
Slider,
} from 'theme-ui'

Theming

Many of the included form components (e.g. Checkbox, Radio, Slider) use 3 colors for their default appearance:

  • gray, for the default state
  • primary, for the active state
  • highlight, for the focus outline

If you’re only looking to change the colors, providing custom values for these colors in theme.colors is the easiest path.

Further customization

Add styles for form elements in the theme.forms object.

// example theme
{
forms: {
label: {
fontSize: 1,
fontWeight: 'bold',
},
input: {
borderColor: 'gray',
'&:focus': {
borderColor: 'primary',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
outline: 'none',
},
},
select: {
borderColor: 'gray',
'&:focus': {
borderColor: 'primary',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
outline: 'none',
},
},
textarea: {
borderColor: 'gray',
'&:focus': {
borderColor: 'primary',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
outline: 'none',
},
},
slider: {
bg: 'muted',
},
},
}
Edit the page on GitHub
Previous:
Flex
Next:
Grid