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 stateprimary
, for the active statehighlight
, 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.
Edit the page on GitHub// 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',},},}