Components / Text & numbers

InputGroup

Joins inputs, selects, pickers and buttons into one seamless control with shared borders and corners.

@ruckc/truss-ui Text & numbers

Import

import { InputGroup } from '@ruckc/truss-ui';

Playground

API

Joins controls into one seamless unit: shared 1px borders, corner radii only on the outer ends, focus raised above neighbours. Put almost any input inside — Input, NumberInput, Select, Combobox, MultiSelect, TagInput, Textarea, DatePicker, TimePicker, DateRangePicker, DateTimePicker, DurationInput, ColorPicker, SegmentedControl, Button, SplitButton, MenuButton — plus <InputAddon> for static text or icons. Give the *group* the label/hint/error, not the individual controls (their own labels would break the alignment). Inputs share the free space; give a child a fixed width by wrapping it, e.g. `<div style="width: 120px">`.

Prop	Type	Default	Description
label	string	—	Visible label shown above the control.
hint	string	—	Helper text shown below the control.
error	string	—	Error message. Marks the control invalid, replaces the hint, and is announced to assistive technology.
size	'sm' | 'md' | 'lg'	'md'	Sets the height of every default-sized control inside.
vertical	boolean	false	Stack the controls instead of lining them up.
disabled	boolean	false	Disables every control inside.
children required snippet	Snippet	—	Content, as a Svelte snippet.