Control Group

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

Example

1 import { ControlGroup, FlexBox } from '@sugarcoat/ui';
2
3 <FlexBox gap='3' justify='center'>
4 <ControlGroup border="dashed">
5 <Button variant='ghost' color='default'>+</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

The unifier of controls. ControlGroup is the ultimate wrangler that effortlessly brings together input elements like buttons, selects, or toggles into a cohesive, tight-knit unit. It ensures harmony and alignment, making your controls feel like part of a well-orchestrated ensemble.

Component Properties

Control Group
PropTypeDefaultExplanation
sizestringmd

Sets the scale of the ControlGroup, allowing you to choose between different sizes to ensure it harmonizes with the surrounding elements and feels right at home in your UI.

borderbooleantrue

A true/false switch that decides whether your ControlGroup should be outlined with borders, giving you the power to go for a defined enclosure or a borderless blend.

blockbooleanfalse

When set to true, the ControlGroup stretches out to occupy the full width of its parent container, asserting its presence. When false, it sizes according to its content.

Customize The Look
Check out these sample themes
Or create your ownBrand color
Accent color
Neutral color
Border radius