Import
import { ControlGroup, Input, Button } from "@sugarcoat/ui-nxt";Usage
<ControlGroup>
<Input placeholder="Search..." />
<Button>Search</Button>
</ControlGroup>Examples#
Basic Control Group#
Search Input with Button
With Select and Input#
Category Search
Sizes#
Control the size of all grouped elements with the size prop.
Extra Small
Small
Medium (Default)
Large
Block Width#
Make the control group span the full width of its container.
Full Width
Border Styles#
Solid Border
Dashed Border
No Border
Practical Examples#
URL Input
Quantity Selector
Copy to Clipboard
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | The size of the control group and its children |
| block | boolean | false | Whether the control group spans full width |
| border | "solid" | "dashed" | "none" | "solid" | The border style of the control group |
| children | ReactNode | - | Form control components to group together |