<CheckboxInput> Component

A basic checkbox and label that allow the user to control a <input type="checkbox" /> element.

Note: checkbox-input expects a parent component to control the input. The live example below does not include control through onChange events, so clicking it has no effect.

Share
Code Editor
<CheckboxInput
label="This is an example checkbox"
field={{
name: 'example_checkbox',
value: false,
checked: false,
onChange: () => null,
}}
form={{
errors: { example_checkbox: 'This is an example error message.' },
touched: { example_checkbox: true },
}}
/>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...

Examples

Light theme


You must check this checkbox, or else.


Dark theme


You must check this checkbox, or else.

Props

NameDescription
label*
string
Text to display next to the checkbox. Accepts plain text or HTML.
field*
object
Props to pass to the underlying <input /> element, { name, value, checked, onChange }. Note that for this component, which uses <input type="checkbox" />, the field.value and field.checked properties should be identical. The field prop is typically supplied by Formik .
form*
object
Form data. A non-empty error string errors[field.name] will be shown if present, but only if touched[field.name] is also truthy. The form prop is typically supplied by Formik .
Object contains nested props, see below:
form.touched
object
supplied by formik
form.errors
object
supplied by formik
theme
object
Controls the appearance of the checkbox
Object contains nested props, see below:
theme.background
string
background color the checkbox sits on top of
Options: "light", "dark", "brand"
className
string
Optional className to add to the root element