Components

ControlBox

ControlBox provides style props to change it's styles based on a sibling checkbox or radio input. It relies on a common CSS technique for styling custom controls.

For this component to work, it should have a sibling input and be contained in a label

Usage

Creating a custom checkbox component

Creating a custom radio component

Props

ControlBox composes the Box component so you can pass all Box props. By default, we toggle the opacity of the ControlBox children by setting _child to { opacity: 0 } and _checkedAndChild to { opacity: 1 }

Prop	CSS selector	Description
_hover	`[input]:hover + &`	Styles for when the sibling `input` is hovered
_focus	`[input]:focus + &`	Styles for when the sibling `input` is focused
_disabled	`[input]:disabled + &`	Styles for when the sibling `input` is disabled
_checked	`[input]:checked + &`	Styles for when the sibling `input` is checked
_checkedAndDisabled	`[input]:checked:disabled + &`	Styles for when the sibling `input` is checked and disabled
_checkedAndFocus	`[input]:checked:focus + &`	Styles for when the sibling `input` is checked and focused
_checkedAndHover	`[input]:checked:hover + &`	Styles for when the sibling `input` is checked and hovered
_invalid	`[input]:[aria-invalid=true] + &`	Styles for when the sibling `input` has `aria-invalid` set to `true`
_child	`[input] + & > *`	Styles for the child of the `ControlBox`
_checkedAndChild	`[input]:checked + & > *`	Styles for the child of the `ControlBox` when the sibling `input` is checked