Checkboxes

PreviousNext

A checkboxes group component for forms

'use client';

import { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';
import { Filter } from '@/ui/forms/Filter';

export function CheckboxesDemo() {
  return (
    <Checkboxes name="options" overrideTabIndex={false}>
      <Filter value="option1">Option 1</Filter>
      <Filter value="option2">Option 2</Filter>
      <Filter value="option3">Option 3</Filter>
    </Checkboxes>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/checkboxes.json

Usage

import { Checkboxes } from '@/docs/lib/ui/forms/Checkboxes';
import { Checkbox } from '@/docs/lib/ui/forms/Checkbox';
 
export default function CheckboxesDemo() {
  return (
    <Checkboxes name="options">
      <Checkbox value="option1">Option 1</Checkbox>
      <Checkbox value="option2">Option 2</Checkbox>
      <Checkbox value="option3">Option 3</Checkbox>
    </Checkboxes>
  );
}

Usage with Filter

import { Checkboxes } from '@/docs/lib/ui/forms/Checkboxes';
import { Filter } from '@/docs/lib/ui/forms/filter';
 
export default function CheckboxesWithFilterDemo() {
  return (
    <Checkboxes name="options">
      <Filter value="option1">Option 1</Filter>
      <Filter value="option2">Option 2</Filter>
      <Filter value="option3">Option 3</Filter>
    </Checkboxes>
  );
}

API Reference

Checkboxes

PropTypeDefaultDescription
'use client';

import { FormControl } from '@/ui/forms/FormControl';
import { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';
import { Checkbox } from '@/ui/forms/checkboxes/Checkbox';

export function CheckboxesWithFormControlDemo() {
  return (
    <FormControl label="Select options" description="Choose one or more options">
      <Checkboxes name="options" aria-labelledby="options-label">
        <Checkbox value="option1">Option 1</Checkbox>
        <Checkbox value="option2">Option 2</Checkbox>
        <Checkbox value="option3">Option 3</Checkbox>
      </Checkboxes>
    </FormControl>
  );
}

Notes