Input

🌓Dark Mode Compatible

Overview

Input is a text field for capturing short user input. Use it for names, email addresses, and other single‑line values.

Live Demo

Live demoInteractive

Username

Anatomy

• Root: The native input element.
• State: Visual feedback for focus, error, and disabled states.

Usage

import { Input, Label } from '@grasdouble/lufa_design-system';

export function Example() {
  return (
    <>
      <Label htmlFor="username">Username</Label>
      <Input id="username" placeholder="Enter username" />
    </>
  );
}

Props

Prop	Type	Default	Description
error	boolean	false	Applies error styling (red border).
disabled	boolean	false	Disables interaction and applies disabled styling.
fullWidth	boolean	false	Stretches the input to 100% of container width.
className	string	undefined	Additional CSS classes.
...props	InputHTMLAttributes	-	All standard input attributes (type, value, onChange, etc.).

Accessibility

Always associate a label with the input using htmlFor and id. Do not rely on placeholder as the only label.

Theming & Tokens

Input uses component tokens for background, border, and text colors. These tokens are theme‑aware.

Do / Don’t

Do

Use Input with Label and show error text in addition to the visual error state.

Don’t

Avoid using Input for multi‑line text—use a textarea component instead.

Related Components

• Label
• Text