Source

Command Palette

Search for a command to run...

Input

Text input component with label and supporting text.

About Input

A styled text input wrapper that provides consistent label, supporting text, and error states. Supports multiple border variants (underlined, outlined, ghost) and sizes for different form contexts.

Installation

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

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

Usage

The simplest form of the component with default styling.
Default

Variants

Component variants for different visual styles and use cases.
Ghost

Outlined

Underlined

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Disabled

Error

Label

Supporting Text

Types

API Reference

Input

variant
Border visual style variant.
Type: BorderVariant
size
Input size variant.
Type: SizeVariant
label
Label displayed above the input.
Type: React.ReactNode
supportingText
Supporting text or error message displayed below the input.
Type: React.ReactNode
error
Error state styling with red border.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the input• Shift + Tab - Navigate to previous element• Standard input keyboard shortcuts for editing (Arrow keys, Home, End, Delete, Backspace)
ARIA Attributes
Proper ARIA attributes for screen readers
• aria-invalid - Marks input as having validation errors• aria-describedby - Links to supporting text or error message• aria-labelledby - Links to label element
Focus States
Visible focus indicators for keyboard users
• Focus is managed natively by browser. Visual focus indicators show when input is active. Error states have distinct focus indicators to provide clear feedback.
Input-group