Sponsor

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

Editable Example

Creating a custom radio component

Editable Example

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 }

PropCSS selectorDescription
_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

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo