Control Group

Streamline your user inputs with our ControlGroup. Grouped to perfection, they make interactions feel natural and intuitive.

Example

1import { ControlGroup, FlexBox } from '@sugarcoat/ui';
2
3<FlexBox gap='3' justify='center'>
4 <ControlGroup>
5 <Button>+</Button>
6 <Input placeholder='Input' />
7 <Select id='dummySelect' placeholder='Select'>
8 <Select.Item value='1'>Option 1</Select.Item>
9 <Select.Item value='2'>Option 2</Select.Item>
10 <Select.Separator />
11 <Select.Group>
12 <Select.Item value='3'>Option 3</Select.Item>
13 <Select.Item value='4'>Option 4</Select.Item>
14 </Select.Group>
15 </Select>
16 </ControlGroup>
17</FlexBox>
18

API Reference

ComponentDescription
Control Group

A component that groups form controls like buttons, inputs, and selects into a cohesive unit with shared borders and consistent spacing.

Component Properties

Control Group
PropTypeDefaultDescription
sizestring"md"Sets the size of the control group, affecting padding and border radius.
blockbooleanfalseWhen true, the control group will take up the full width of its container.
borderstring"solid"Sets the border style of the control group.
Customize The Look
Check out these sample themes
Or create your ownBrand color
Accent color
Neutral color
Border radius