<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.
Code Editor
<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 },}}/>
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...6.x.x
Loading 6.x.x releases...Examples
Light theme
You must check this checkbox, or else.
Dark theme
You must check this checkbox, or else.
Props
| 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 |