Skip to content
Rebass
GitHub

Forms

Accessible and themeable form components for use with Rebass or Theme UI.

npm i @rebass/forms

Import and use the form components alongside other Rebass components.

import {
Label,
Input,
Select,
Textarea,
Radio,
Checkbox,
} from '@rebass/forms'
Live Demo

Theming

Each form element can be customized with the forms object in your theme.

// example theme
export default {
forms: {
input: {
color: 'primary',
},
select: {
borderRadius: 9999,
},
textarea: {},
label: {},
radio: {},
checkbox: {},
},
}

Variants

Additional component variants can be defined in the theme and applied via props.

// example theme with variants
export default {
forms: {
largeInput: {
fontSize: 3,
px: 3,
py: 2,
}
}
}
<Input variant='largeInput' />
Edit this page on GitHub
Previous:
Card
Next:
Label