Select

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

Example

1  import { Select, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox 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  </FlexBox>
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 FlexBoxible 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.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius