Control Group

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

Example

1  import { ControlGroup, Flex } from '@haktos/sugarcoat-ui';
2
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>
18

API Reference

Component	Description
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

Prop	Type	Default	Explanation
`size`	`string`	md	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.
`border`	`boolean`	true	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.
`block`	`boolean`	false	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.