CheckboxGroup

Molecule

Chip görünümlü çoklu seçim grubu. Seçili chip bg-primary-subtle / border-primary renk tokenları ile işaretlenir. Klavye erişilebilir.

Default

Preview
Tech stack
Code
const [selected, setSelected] = useState(['react', 'typescript']);
<CheckboxGroup
  legend="Tech stack"
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'typescript', label: 'TypeScript' },
  ]}
  selected={selected}
  onChange={setSelected}
/>

Disabled

Preview
Permissions
Code
<CheckboxGroup
  legend="Permissions"
  options={[
    { value: 'read', label: 'Read' },
    { value: 'write', label: 'Write' },
    { value: 'delete', label: 'Delete' },
  ]}
  selected={['read']}
  onChange={() => {}}
  disabled
/>
Sourcemodules/ui/CheckboxGroup.tsx