- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
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';23 <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
Component | Description |
---|---|
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
Prop | Type | Default | Explanation |
---|---|---|---|
align | string | center | Decide the alignment of the SelectContent against the Trigger: start, end, or center. |
side | string | bottom | Control where the SelectContent pops out in relation to the Trigger: top, bottom, left or right. |
position | string | item-aligned | Choose the way SelectContent positions itself: item-aligned for a macOS-like functionality or popper for more flexible positioning. |
value | boolean | Put the strings on the puppet with state-controlled selection. This lets you decide the current option of the Select component. | |
defaultValue | boolean | "Set it and forget it"! Use defaultValue when there's no need to control the value with state. | |
onValueChange | function | It's always listening. Triggers a callback function each time the selected value changes. | |
open | boolean | The ultimate toggle, letting you control if the Select options are shown or hidden via state. | |
defaultOpen | boolean | If state management isn't your thing, use this to determine whether the Select starts open. | |
onOpenChange | function | Stay in the loop with a callback that triggers when the open state changes. | |
name | string | A good name is unforgettable. It identifies your Select component within a form. | |
id | string | A unique ID for the Select component, perfect for pairing with a label. | |
disabled | boolean | false | Make the Select component untouchable, disabling user input. |
required | boolean | false | A stern flag that marks the Select input as necessary before form submission. |
placeholder | string | It's the shy hint that appears before a selection is made. | |
label | string | An expressive string that explains what the Select component is for. | |
size | string | md | Whether you need 'xs', 'sm', 'md', or 'lg', size alters the padding and font size to fit your design needs. |
radius | string | md | Round out your style! Control the corner roundness from 'none' to 'full'. |
shadow | string | sm | Cast a 'none', 'xs', 'sm', 'md', or 'lg' sized shadow to give your Select component depth. |
block | boolean | true | A boolean power move to make your Select stretch to full width. |
animation | boolean | true | An animated boolean for smooth transitions. |
Select.Item
Prop | Type | Default | Explanation |
---|---|---|---|
value | string | Just like a name tag, this defines the unique value of the item in the list. | |
disabled | boolean | false | A Boolean switch to prevent interaction with this item. |
textValue | string | It's optional but handy! This is the text used when the user is typing for quick selection. | |
color | string | default | Decide the alignment of the SelectContent against the Trigger: start, end, or center. |
separator | boolean | false | A Boolean decorator that adds a Select.Separator after the item if set to true. |