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

Checkbox Label

<label>
  {/* This is the sibling input, it's visually hidden */}
  <VisuallyHidden as="input" type="checkbox" defaultChecked />

  {/* This is the control box with a check icon as children */}
  <ControlBox
    borderWidth="1px"
    size="24px"
    rounded="sm"
    _checked={{ bg: "green.500", color: "white", borderColor: "green.500" }}
    _focus={{ borderColor: "green.600", boxShadow: "outline" }}
  >
    <Icon name="check" size="16px" />
  </ControlBox>

  {/* You can pass additional text */}
  <Box as="span" verticalAlign="top" ml={3}>
    Checkbox Label
  </Box>
</label>

<label>
  {/* This is the sibling input, it's visually hidden */}
  <VisuallyHidden as="input" type="checkbox" defaultChecked />
  {/* This is the control box with a check icon as children */}
  <ControlBox
    borderWidth="1px"
    size="24px"
    rounded="sm"
    _checked={{ bg: "green.500", color: "white", borderColor: "green.500" }}
    _focus={{ borderColor: "green.600", boxShadow: "outline" }}
  >
    <Icon name="check" size="16px" />
  </ControlBox>
  {/* You can pass additional text */}
  <Box as="span" verticalAlign="top" ml={3}>
    Checkbox Label
  </Box>
</label>

Editable Example

Creating a custom radio component

This is a Radio

<label>
  {/* This is the sibling input, it's visually hidden */}
  <VisuallyHidden type="radio" as="input" />

  {/* This is the control box with a circle as children */}
  <ControlBox
    size="24px"
    bg="white"
    border="2px"
    rounded="full"
    type="radio"
    borderColor="inherit"
    _focus={{ boxShadow: "outline" }}
    _hover={{ borderColor: "gray.300" }}
    _disabled={{ opacity: "40%" }}
    _checked={{ bg: "green.500", borderColor: "green.500" }}
  >
    <Box size="50%" bg="white" rounded="full" />
  </ControlBox>

  {/* You can pass additional text */}
  <Box as="span" ml={2} verticalAlign="center" userSelect="none">
    This is a Radio
  </Box>
</label>

<label>
  {/* This is the sibling input, it's visually hidden */}
  <VisuallyHidden type="radio" as="input" />
  {/* This is the control box with a circle as children */}
  <ControlBox
    size="24px"
    bg="white"
    border="2px"
    rounded="full"
    type="radio"
    borderColor="inherit"
    _focus={{ boxShadow: "outline" }}
    _hover={{ borderColor: "gray.300" }}
    _disabled={{ opacity: "40%" }}
    _checked={{ bg: "green.500", borderColor: "green.500" }}
  >
    <Box size="50%" bg="white" rounded="full" />
  </ControlBox>
  {/* You can pass additional text */}
  <Box as="span" ml={2} verticalAlign="center" userSelect="none">
    This is a Radio
  </Box>
</label>

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 }

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

Proudly made in 🇳🇬

Released under the MIT License.

ControlBox

.css-12m0k8p{pointer-events:auto;}Usage.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Props#

Usage#