Source

Command Palette

Search for a command to run...

Input-group

Groups inputs with buttons and text addons for composed form controls.

About InputGroup

Combines input fields with buttons or text elements into a single visual group. Provides size context to children and handles focus states and error styling across the group.

Installation

Import the InputGroup component from LSD:
import { InputGroup } from '@nipsys/lsd'

export default function MyComponent() {
  return <InputGroup />
}

Usage

The simplest form of the component with default styling.
Basic

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Alignment

Disabled

With Icons

Composition

InputGroup
├── InputGroupInput
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

API Reference

InputGroup

size
Size variant for the input group.
Type: InputGroupSize

InputGroupAddon

align
Alignment of the addon element.
Type: InputGroupAddonAlign

InputGroupButton

variant
Visual style variant for button.
Type: InputGroupButtonVariant
size
Size variant for button.
Type: InputGroupButtonSize
type
Button type attribute.
Type: "button" | "submit" | "reset"

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through group items sequentially• Enter - Activate focused button within group
ARIA Attributes
Proper ARIA attributes for screen readers
• role="group" identifies the component as a grouping• aria-invalid indicates group error state
Focus States
Visible focus indicators for keyboard users
• Focus is managed across elements within the group. Visual focus indicators appear on the active element. Group borders change color on focus of any child element.
Label