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/components'

Theming

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:
Card
Next:
Label