Control Group

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


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

API Reference

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

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.


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.


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.