Checkboxes

PreviousNext

A checkboxes group component for forms

'use client';

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

export function CheckboxesDemo() {
  return (
    <Checkboxes name="options">
      <FormCheckbox value="option1">Option 1</FormCheckbox>
      <FormCheckbox value="option2">Option 2</FormCheckbox>
      <FormCheckbox value="option3">Option 3</FormCheckbox>
    </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>
  );
}

API Reference

Checkboxes

PropTypeDefaultDescription
'use client';

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

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

Notes