Checkbox
import Checkbox from 'frui/fields/Checkbox';Props
Checkbox accepts all props of a standard HTML input element. See Moz for standard input attributes.
| Name | Type | Required | Notes |
|---|---|---|---|
| blue | boolean | No | Show blue checkbox |
| check | boolean | No | Show check when checked |
| checked | boolean | No | Default checked state (Controlled) |
| circle | boolean | No | Show circle when checked |
| className | string | No | Standard HTML class names |
| defaultChecked | string | No | Default checked state (Uncontrolled) |
| defaultValue | string | No | Default value (Uncontrolled) |
| error | string|boolean | No | Any error message |
| label | string | No | Shows text to the right of checkbox |
| name | string | No | Used for react server components. |
| onChange | Function | No | Event handler when value has changed |
| onUpdate | Function | No | Update event handler |
| orange | string | No | Show orange checkbox |
| passRef | LegacyRef | No | Passes ref to html input |
| rounded | boolean | No | Make checkbox rounded |
| square | boolean | No | Show square when checked |
| style | CSS Object | No | Standard CSS object |
| value | string | No | Default value (Controlled) |
Basics
Checkbox wraps the HTML standard `<input />` element. Therefore, you can use any input attributes as props.
<Checkbox name="name" label="Active?" value="yes" defaultChecked />Events
onUpdate is like onChange except the value is passed instead of the change event.
<Checkbox label="Active?" onUpdate={(value, checked) => alert(`${value} - ${checked}`)} />On Change
The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:
| Name | Type | Sample |
|---|---|---|
| event | Event Object | see: Change Event |
On Update
The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:
| Name | Type | Sample |
|---|---|---|
| value | string | `foobar` |
Errors
You can pass the error prop to highlight the Checkbox field red.
<Checkbox error defaultChecked label="Active?" />Custom Styles
You can apply rounded, colors and shapes to the Checkbox component.
Rounded
Use rounded prop to make the checkboxes circular.
<Checkbox rounded defaultChecked />Colors
Use blue or orange prop to change the color of checkboxes.
<Checkbox blue label="Blue" defaultChecked />Shapes
Use circle, checked or checked prop to change the color of checkboxes.
<Checkbox square label="Blue" defaultChecked />Combniations
Try different combinations to get the checkbox you want.
You can also add your own custom class to Checkbox components or use any combination of frui-field-option, frui-field-option-control, and frui-field-option-label CSS classes.