Select

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

Example

1 import { Select, Flex } from '@haktos/sugarcoat-ui';
2
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>
12

API Reference

It builds on top of Radix-UI Select

ComponentDescription
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.

Select.Item

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

Select.Group

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

Select.Label

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

Select.Separator

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

Select
PropTypeDefaultExplanation
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.
valueboolean

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

defaultValueboolean

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

onValueChangefunction

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

openboolean

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

defaultOpenboolean

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

onOpenChangefunction

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.
blockbooleantrue

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

animationbooleantrue

An animated boolean for smooth transitions.

Select.Item
PropTypeDefaultExplanation
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.