Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenComponents
Disclosure | Collapsible
A disclosure is a collapsible content section featuring a header with a title and a trigger button, along with a panel that holds the content.
Basic
An accordion functions as a vertical stack of headers that expand to reveal or conceal content sections.
Preview
Code
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
Disabled
You can disable all disclosure by setting the isDisabled prop.
Preview
Code
Controlled
You can control the disclosure by using the isExpanded prop.
Preview
Code
The disclosure is collapsed.
Accordion
If you're looking for a more advanced accordion, check out the Disclosure Group component.