You are currently viewing outdated (<=3.x) Chameleon documentation on our old website. For version >=4.x, check out our new website.

Current release: 3.5.0 | hub

components

Checkbox (code)

A checkbox is an input control for making selections.

import { Checkbox } from '@mediahuis/chameleon-react'

Props

NameTypeDefaultRequiredDescription
actionNode--Contents displayed within the ActionLabel.
checkedBoolean--Sets the native checkbox checked state.
classNameString--Extend classNames.
disabledBoolean---
errorBoolean--Visually displayed as error text. Will add the necessary accessibility tags.
idString-trueNative HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
labelNode-trueContents displayed within the PrimaryLabel.
labelHiddenBoolean--Visibly hide the label. (label is still required for a11y)
labelPlacement'left''right'--The placement of the label.
labelProps{ "color": "String" "decoration": "'inherit''none''underline''line-through'" "fontFamily": "'inherit''primary''secondary''system'" "fontWeight": "'inherit''regular''medium''bold'" "size": "'Heading1''Heading2''Heading3''Heading4''Heading5''Heading6''Caption1''Caption2'" "textTransform": "'inherit''none''capitalize''uppercase''lowercase'" }--Props passed to the label component, the API may change in the future.
messageString--Contents displayed beneath the label.
onChangeFunction--Native change event, validate on event.target.checked.
optionalLabelString--Contents displayed within the OptionalLabel.
requiredBoolean--Sets native input required attribute.
valueString--Native input value.

System Props

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Action

default: undefined

Adds an action or extra information to your item, mostly used for links.

Checked

default: undefined

Make a Checkbox selected by passing the checked prop.

Disabled

default: undefined

Marking a Radio as disabled, will disable all interaction with the element.

Error

default: undefined

To convey an error to the user, you can set the error prop to true.

LabelHidden

default: undefined

To meet accessibility requirements, every Checkbox should have an associated label. We do support the ability to visually hide the label when the Checkbox's purpose is clear.

LabelPlacement

default: undefined

The positioning of the label against the Checkbox itself. The full label will move position (also action, message & optionalLabel).

LabelProps

default: undefined

You can visually change the label of the Checkbox. For more info about the possibilities, check the Text component's documentation

(Label inherits the Text).

Message

default: undefined

Give additional information to the user.

OptionalLabel

default: undefined

Compared with TextField, Checkbox is not required by default. The optionalLabel is additional feedback to the user, please provide it where needed.

Required

default: undefined

Make the field required if needed. If you already added optionalLabel, the field will stay optional to not confuse the user.

Value

default: undefined

Use value for controlled Checkboxes.

© Copyright 2020 Mediahuis NV. All rights Reserved