Input Group
Attach icons, text, keyboard hints and buttons to an input or textarea, in a plain form or inside AutoForm fields.
Preview
Usage
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from '@vitnode/core/components/ui/input-group'<InputGroup>
<InputGroupInput aria-label="Search" placeholder="Search..." />
<InputGroupAddon>
<Search />
</InputGroupAddon>
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>Put the control first and the addons after it. align moves each addon into
place, whatever the markup order.
Addons
An addon holds an icon, InputGroupText, a Kbd or an
InputGroupButton. Icon-only buttons need an aria-label. Clicking an addon
outside its buttons focuses the control.
<InputGroup>
<InputGroupInput aria-label="Invite link" readOnly value={inviteUrl} />
<InputGroupAddon align="inline-end">
<InputGroupButton aria-label="Copy invite link" size="icon-xs">
<Copy />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>Disable the control and the whole group dims with it.
Alignment
align | Position |
|---|---|
inline-start (default) | Before the text |
inline-end | After the text |
block-start | Above the control, full width |
block-end | Below the control, full width (footers) |
<InputGroup>
<InputGroupTextarea aria-label="Describe the issue" rows={6} />
<InputGroupAddon align="block-end">
<InputGroupText className="tabular-nums">
0 of 500 characters
</InputGroupText>
</InputGroupAddon>
</InputGroup>With AutoForm
Pass addons as children of AutoFormInput or AutoFormTextarea. The field
wraps itself in an InputGroup.
{
id: "description",
component: props => (
<AutoFormTextarea {...props} label="Description" rows={6}>
<InputGroupAddon align="block-end">
<InputGroupText className="tabular-nums">
{props.field.value?.toString().length ?? 0} of 500 characters
</InputGroupText>
</InputGroupAddon>
</AutoFormTextarea>
),
}Button sizes
InputGroupButton defaults to variant="ghost" and type="button". Sizes:
xs (default), sm, icon-xs and icon-sm. All fit the default group height.