Checkbox: React
A Checkbox is an input control for making selections.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Checkbox } from '@mediahuis/chameleon-react';
export default function Example() {
return <Checkbox label="Example" id="example" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
action | ReactNode | - | No | The contents displayed within the ActionLabel. |
checked | Boolean | - | No | Sets the native checkbox checked state. |
className | String | - | No | Allows extending the class names of the Checkbox component. |
disabled | Boolean | - | No | Sets the native HTML disabled attribute. |
error | Boolean | - | No | Visually displays the Checkbox with an error state. It also adds the necessary accessibility tags. |
id | String | - | Yes | Sets the native HTML id attribute. It will also affect the label-id and the message-id for accessibility reasons. |
label | ReactNode | - | No | The contents displayed within the PrimaryLabel. |
labelHidden | Boolean | - | No | Visually hides the label. Note that the label is still required for accessibility. |
labelPlacement | 'left' | 'right' | - | No | Sets the placement of the label. |
labelProps | GenericComponentPropsWithoutAs | - | No | Object containing additional props passed to the label component. |
labelId | String | `${id}-label` | No | The unique HTML id attribute. It is used for associating the label and the radio components for accessibility. |
message | ReactNode | - | No | The contents displayed beneath the label. |
onChange | Function | - | No | The native change event. It validates on `event.target.checked`. |
optionalLabel | String | - | No | The contents displayed within the OptionalLabel. |
required | Boolean | - | No | Sets the native input required attribute. |
value | String | - | No | The native input value. |
inputProps | GenericComponentPropsWithoutAs | - | No | Object containing additional props passed to the input component. |
required
Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.