Dropdown

Surprise! Our Dropdown is a jack-in-the-box of options, just a click away

Example

1  import { Dropdown, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <Dropdown>
5        <Dropdown.Trigger size='md' color='neutral'>
6          Dropdown menu
7        </Dropdown.Trigger>
8        <Dropdown.Content arrow size='md'>
9          <Dropdown.Item>
10            Back home
11          </Dropdown.Item>
12          <Dropdown.Item disabled>Item</Dropdown.Item>
13          <Dropdown.Item>Item</Dropdown.Item>
14          <Dropdown.Separator />
15          <Dropdown.Group label='CheckboxItem'>
16            <Dropdown.CheckboxItem checked>
17              CheckboxItem
18            </Dropdown.CheckboxItem>
19            <Dropdown.CheckboxItem>CheckboxItem</Dropdown.CheckboxItem>
20            <Dropdown.CheckboxItem>CheckboxItem</Dropdown.CheckboxItem>
21          </Dropdown.Group>
22          <Dropdown.Separator />
23          <Dropdown.RadioGroup label='RadioItem' value='2'>
24            <Dropdown.RadioItem value='1'>RadioItem 1</Dropdown.RadioItem>
25            <Dropdown.RadioItem value='2'>RadioItem 2</Dropdown.RadioItem>
26            <Dropdown.RadioItem value='3'>RadioItem 3</Dropdown.RadioItem>
27          </Dropdown.RadioGroup>
28        </Dropdown.Content>
29      </Dropdown>
30  </FlexBox>
31

API Reference

It builds on top of Radix-UI Dropdown

Component	Description
Dropdown	Dropdown is a versatile component that hides a treasure trove of choices behind a clickable trigger. With subcomponents to group, label, and style options, Dropdown ensures a neat and organized selection experience.
Dropdown.Trigger	The gatekeeper. This subcomponent serves as the clickable element that reveals or conceals the Dropdown content. Buttons or custom elements – it can be styled to beckon users to explore the options.
Dropdown.Content	The hidden treasure. Here, you nest all the delightful options or content that users can discover. It serves as a container for items, labels, and more.
Dropdown.Item	The shiny gems. These are the individual choices available in the Dropdown. Highly customizable, they can be simple text options or more elaborate elements.
Dropdown.Label	The organizer’s tag. Use Labels within groups to provide context or categorization for a set of Dropdown Items.
Dropdown.Group	The treasure compartments. Create logical clusters of items within the Dropdown Content, making it easier for users to find the jewels they seek.
Dropdown.CheckboxItem	The multitasker's choice. When you need to allow users to select multiple options, Checkbox Items are the trusty tools to have in your Dropdown.
Dropdown.RadioGroup	The exclusive club. Nest Radio Items within this to make sure users can only pick one of the options in a set.
Dropdown.RadioItem	The solo artist. Use these within a Radio Group for instances where users need to make a single selection from a set of options.
Dropdown.Separator	The treasure map’s legend. Use this to create divisions within the Dropdown content, guiding users through the choices with visual clarity.

Component Properties

Dropdown

Acts as RadixUI's Dropdown. Most of the props available here can be used on the Dropdown component

Prop	Type	Default	Explanation
`open`	`boolean`	-	Controls the open state of the dropdown menu and is used together with onOpenChange.
`defaultOpen`	`boolean`	-	The initial open state of the dropdown menu when it is rendered. Only used when open is not provided.
`onOpenChange`	`function`	-	Callback that is called when the open state of the dropdown changes.
`modal`	`boolean`	true	When true, interaction with outside elements is disabled.

Dropdown.Trigger

A wrapper around RadixUI's Dropdown.Trigger and Sugarcoat Button.

Prop	Type	Default	Explanation
`variant`	`string`	default	(Optional) Any of Button's variant style
`size`	`string`	md	(Optional) Any of Button's size value
`color`	`string`	primary	(Optional) Any of Button's color style

All the props of Button are available and can be used to customize the trigger button.

Moreover, you can pass any element as a child of Dropdown.Trigger to customize the trigger button as you wish

Dropdown.Content

The heart of the dropdown. This component houses your dropdown's main content. It houses RadixUI's Dropdown.Content.

Prop	Type	Default	Explanation
`align`	`string`	center	The alignment against the `Dropdown.Trigger`
`arrow`	`boolean`	true	When true, it renders the `Dropdown.Arrow` without the need to add it inside the content
`portal`	`boolean`	true	When true, it portals `Dropdown.Content` into the `body`
`side`	`string`	bottom	The side where it the `Dropdown.Content` is rendered against the `Dropdown.Trigger`
`size`	`string`	md	The size of the Dropdown.Content, which affects padding, font size and border roundness

Note: Besides the above, you can use all the props specified here

Dropdown.Item

A wrapper around RadixUI's Dropdown.Item.

Prop	Type	Default	Explanation
`color`	`string`	default	The color variant for each item in the Dropdown menu.
`disabled`	`boolean`	false	Disables interaction with the Item
`onSelect`	`function`	-	Callback for when the user selects the item
`textValue`	`string`	-	Optional text used for typeahead purposes.

Dropdown.Label

The storyteller of the Dropdown and a wrapper around RadixUI's Dropdown.Label. It provides further details and context to support the Groups and Items.

Prop	Type	Default	Explanation
`asChild`	`boolean`	false	Replace the default element with a child element, merging their properties and behaviors.

Dropdown.Group

Used to group multiple Dropdown.Items and Dropdown.CheckboxItem within the Dropdown Content, making it easier for users to navigate the content.

Prop	Type	Default	Explanation
`label`	`string`	-	Adds a `Dropdown.Label` at the beginning of the Group for better clustering.

Dropdown.CheckboxItem

It houses RadixUI's Dropdown.CheckboxItem.

Prop	Type	Default	Explanation
`checked`	`boolean`	false	CheckboxItem's state
`color`	`string`	default	The color variant for each item in the Dropdown menu.
`disabled`	`boolean`	false	Disables interaction with the Item
`showIndicator`	`boolean`	false	When false, it hides the check indicator of the CheckboxItem
`onCheckedChange`	`function`	-	Callback function that is called when check state changes.
`onSelect`	`function`	-	Callback for when the user selects the item
`textValue`	`string`	-	Optional text used for typeahead purposes.

Dropdown.RadioGroup

Used to group multiple Dropdown.RadioItems within the Dropdown Content.

Prop	Type	Default	Explanation
`label`	`string`	-	Adds a `Dropdown.Label` at the beginning of the Group for better clustering.
`onValueChange`	`function`	-	Callback for when the Radio's value changes
`value`	`string`	-	The value of selected data in the `RadioGroup`

Dropdown.RadioItem

It houses RadixUI's Dropdown.RadioItem.

Prop	Type	Default	Explanation
`color`	`string`	default	The color variant for each item in the Dropdown menu.
`disabled`	`boolean`	false	Disables interaction with the Item
`showIndicator`	`boolean`	false	When false, it hides the check indicator of the CheckboxItem
`onSelect`	`function`	-	Callback for when the user selects the item
`textValue`	`string`	-	Optional text used for typeahead purposes.
`value`	`string`	-	The value to be used when user selects the RadioItem

Dropdown.Separator

Use this to create divisions within the Dropdown content

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius