CheckboxButtonGroup

Multi-select where each option is a button-like card; native checkboxes underneath.

Import

import { CheckboxButtonGroup } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/checkbox-button-group.

Usage

<CheckboxButtonGroup
  options={options}
  defaultValue={["corte"]}
  aria-label="Servicios"
/>

Props

Prop	Type	Default	Description
options *	ButtonOption[]
value	string[]
defaultValue	string[]	[]
onValueChange	((value: string[]) => void)
name	string		Form field name shared by the checkboxes.
disabled	boolean
aria-label	string
aria-labelledby	string
className	string

* marks a required prop.

Storybook stories

• Default
• Disabled
• Narrow
• Brutal Preset

Source

packages/ui/src/forms/checkbox-button-group/checkbox-button-group.tsx