components

Checkbox (code)

A checkbox is an input control for making selections.

Label

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

<Checkbox id="checkbox" label="Label" />

<Checkbox id="checkbox" label="Label" />

Props

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
checked	Boolean	-	-	Sets the native checkbox checked state.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	-
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
id	String	-	true	Native HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
label	Node	-	true	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	-	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.
message	String	-	-	Contents displayed beneath the label.
onChange	Function	-	-	Native change event, validate on event.target.checked.
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
required	Boolean	-	-	Sets native input required attribute.
value	String	-	-	Native input value.

System Props

m, mb, ml, mr, mt, mx, my

float

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.

LabelLinkText

<Checkbox
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

<Checkbox
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

Checked

default: undefined

Make a Checkbox selected by passing the checked prop.

Label

<Checkbox id="checked" label="Label" checked />

<Checkbox id="checked" label="Label" checked />

Disabled

default: undefined

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

Label

<Checkbox id="disabled" label="Label" disabled />

<Checkbox id="disabled" label="Label" disabled />

Error

default: undefined

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

Label

<Checkbox id="checkbox-error" label="Label" error />

<Checkbox id="checkbox-error" label="Label" error />

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.

Label

<Checkbox id="labelHidden" label="Label" labelHidden />

<Checkbox id="labelHidden" label="Label" labelHidden />

LabelPlacement

default: undefined

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

Undefined

Left

Right

<Checkbox mb={5} id="labelPlacementNone" label="Undefined" />
<Checkbox mb={5} id="labelPlacementLeft" label="Left" labelPlacement="left" />
<Checkbox id="labelPlacementRight" label="Right" labelPlacement="right" />

<Checkbox mb={5} id="labelPlacementNone" label="Undefined" />
<Checkbox mb={5} id="labelPlacementLeft" label="Left" labelPlacement="left" />
<Checkbox id="labelPlacementRight" label="Right" labelPlacement="right" />

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).

Label

<Checkbox
  mb={5}
  id="labelProps"
  label="Label"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

<Checkbox
  mb={5}
  id="labelProps"
  label="Label"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

Message

default: undefined

Give additional information to the user.

Label

Multiple checkboxes should have space 5 between them.

Label

Multiple checkboxes should have space 5 between them. Oh, we've got error.

<Box mb={5}>
  <Checkbox
    id="checkbox-message"
    label="Label"
    message="Multiple checkboxes should have space 5 between them."
  />
</Box>
<Box>
  <Checkbox
    id="checkbox-message-error"
    label="Label"
    message="Multiple checkboxes should have space 5 between them. Oh, we've got error."
    error
  />
</Box>

<Box mb={5}>
  <Checkbox
    id="checkbox-message"
    label="Label"
    message="Multiple checkboxes should have space 5 between them."
  />
</Box>
<Box>
  <Checkbox
    id="checkbox-message-error"
    label="Label"
    message="Multiple checkboxes should have space 5 between them. Oh, we've got error."
    error
  />
</Box>

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.

Label(Optional)

<Checkbox id="optional-label" label="Label" optionalLabel="Optional" />

<Checkbox id="optional-label" label="Label" optionalLabel="Optional" />

Required

default: undefined

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

Label

<Checkbox id="required" required={false} label="Label" />

<Checkbox id="required" required={false} label="Label" />

Value

default: undefined

Use value for controlled Checkboxes.

Label 1

Label 2

() => {
  const [form, setForm] = React.useState({
    checkbox1: false,
    checkbox2: true,
  });
  const handleCheckboxChange = ({ target }) => {
    setForm({
      ...form,
      [target.value]: !form[target.value],
    });
  };
  return (
    <React.Fragment>
      <Checkbox
        id="checkbox1"
        label="Label 1"
        value="checkbox1"
        checked={form.checkbox1}
        onChange={handleCheckboxChange}
        mr={5}
      />
      <Checkbox
        id="checkbox2"
        label="Label 2"
        value="checkbox2"
        checked={form.checkbox2}
        onChange={handleCheckboxChange}
      />
    </React.Fragment>
  );
};

() => {
  const [form, setForm] = React.useState({
    checkbox1: false,
    checkbox2: true,
  });
  const handleCheckboxChange = ({ target }) => {
    setForm({
      ...form,
      [target.value]: !form[target.value],
    });
  };
  return (
    <React.Fragment>
      <Checkbox
        id="checkbox1"
        label="Label 1"
        value="checkbox1"
        checked={form.checkbox1}
        onChange={handleCheckboxChange}
        mr={5}
      />
      <Checkbox
        id="checkbox2"
        label="Label 2"
        value="checkbox2"
        checked={form.checkbox2}
        onChange={handleCheckboxChange}
      />
    </React.Fragment>
  );
};