Our Select component lets your users explore their options. It's like a dropdown list, but way cooler


1 import { Select, Flex } from '@haktos/sugarcoat-ui';
3 <Flex justify='center'>
4 <Select value='3'>
5 <Select.Item value='1'>Option 1</Select.Item>
6 <Select.Item value='2'>Option 2</Select.Item>
7 <Select.Item value='3'>Option 3</Select.Item>
8 <Select.Item value='4'>Option 4</Select.Item>
9 <Select.Item value='5'>Option 5</Select.Item>
10 </Select>
11 </Flex>

API Reference

It builds on top of Radix-UI Select


Give your users the power of choice! The Select component enables simple and effective dropdown selections. Paired with grouping and labeling features, navigating through multiple choices is a breeze.


Each Select.Item represents a single option in the dropdown menu. It's the individual choice in a sea of possibilities.


Too many options? No problem. Use Select.Group to create categorized clusters of options, making navigation intuitive and enjoyable.


A guide in the maze of options. Select.Label adds meaningful context to your Select.Group, enhancing your users' understanding and decision-making process.


Need to add some space? Select.Separator introduces a visual pause between your options, enhancing readability and clarity.

alignstringcenterDecide the alignment of the SelectContent against the Trigger: start, end, or center.
sidestringbottomControl where the SelectContent pops out in relation to the Trigger: top, bottom, left or right.
positionstringitem-alignedChoose the way SelectContent positions itself: item-aligned for a macOS-like functionality or popper for more flexible positioning.

Put the strings on the puppet with state-controlled selection. This lets you decide the current option of the Select component.


"Set it and forget it"! Use defaultValue when there's no need to control the value with state.


It's always listening. Triggers a callback function each time the selected value changes.


The ultimate toggle, letting you control if the Select options are shown or hidden via state.


If state management isn't your thing, use this to determine whether the Select starts open.


Stay in the loop with a callback that triggers when the open state changes.

namestringA good name is unforgettable. It identifies your Select component within a form.
idstringA unique ID for the Select component, perfect for pairing with a label.
disabledbooleanfalseMake the Select component untouchable, disabling user input.
requiredbooleanfalseA stern flag that marks the Select input as necessary before form submission.
placeholderstringIt's the shy hint that appears before a selection is made.
labelstringAn expressive string that explains what the Select component is for.
sizestringmdWhether you need 'xs', 'sm', 'md', or 'lg', size alters the padding and font size to fit your design needs.
radiusstringmdRound out your style! Control the corner roundness from 'none' to 'full'.
shadowstringsmCast a 'none', 'xs', 'sm', 'md', or 'lg' sized shadow to give your Select component depth.

A boolean power move to make your Select stretch to full width.


An animated boolean for smooth transitions.

valuestring Just like a name tag, this defines the unique value of the item in the list.
disabledbooleanfalseA Boolean switch to prevent interaction with this item.
textValuestringIt's optional but handy! This is the text used when the user is typing for quick selection.
colorstringdefaultDecide the alignment of the SelectContent against the Trigger: start, end, or center.
separatorbooleanfalseA Boolean decorator that adds a Select.Separator after the item if set to true.