<CheckboxInput> ComponentA 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.
<CheckboxInputlabel="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 },}}/>
Light theme
Dark theme
| Name | Description |
|---|---|
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.touchedobject | supplied by formik |
form.errorsobject | supplied by formik |
themeobject | Controls the appearance of the checkbox Object contains nested props, see below: |
theme.backgroundstring | background color the checkbox sits on top of |
classNamestring | Optional className to add to the root element |