basecn

The Accordion component controls whether multiple items can be open at once using the multiple boolean prop.

• Single mode (Default): When multiple is not provided or is false, the accordion behaves as a single-item accordion (opening one item closes others).
• Multiple mode: When multiple is true, multiple accordion items can be expanded simultaneously.

This differs from Radix UI, which uses a type="single" | "multiple" prop.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"

// Single mode (Default)
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

// Multiple mode
<Accordion multiple>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

While the standard Progress component provides a basic bar, you can achieve complete control over layout and positioning by manually composing the component using ProgressTrack and ProgressIndicator. This is required when you want to include descriptive labels or custom value displays.

Using ProgressLabel

Use the ProgressLabel component to display a descriptive text label for the progress bar.

Using ProgressValue

Use the ProgressValue component to display the current progress. It accepts a render function that provides two arguments:

1. formattedValue: The value formatted with a percentage.
2. progress: The raw progress value.

This allows for custom formatting, such as appending units (e.g., 'lbs').

import {
  Progress,
  ProgressLabel,
  ProgressTrack,
  ProgressIndicator,
  ProgressValue,
} from "@/components/ui/progress";

// Example: Progress with a Label
<Progress value={50}>
  <ProgressLabel>Progress</ProgressLabel>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

// Example: Progress with a custom formatted Value
<Progress value={50}>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
  <ProgressValue>{(formattedValue, progress) => `${progress} lbs`}</ProgressValue>
</Progress>

Forms are built using a nested component structure. The form.AppForm component provides the context, while form.AppField manages individual field states via a render prop. Inside the field render prop, you use form.Item to group the label, control, description, and error message.

Core Component Hierarchy:

• <form.AppForm>: The root provider for the form context.
• <form.AppField name="...">: A field wrapper that provides a field object via a render prop.
• <form.Item>: A layout container for a single field's elements.
• <field.Label>: The accessible label for the field.
• <field.Control>: The container for the actual input element.
• <field.Description>: Helper text or instructions for the field.
• <field.Message>: The error message display for the field.

<form.AppForm>
  <form.AppField name="...">
    {(field) => (
      <form.Item>
        <field.Label />
        <field.Control>
          { /* Your form field */ }
        </field.Control>
        <field.Description />
        <field.Message />
      </form.Item>
    )}
  </form.AppField>
</form.AppForm>