loom muslin

Input

Single-line text field with error state.

Previewlive — edit controls below

Content

Appearance

State

Basic

import { Input } from "@loom/muslin-react";

<Input placeholder="Search invoices…" />

Invalid

<Input invalid defaultValue="not-an-email" aria-label="Email" />

Labeled field

Label bound with htmlFor; size matches the label rhythm.

import { Input, Label } from "@loom/muslin-react";

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@company.com" />

Sizes

sm, md (default), lg share the Button size scale.

import { Input } from "@loom/muslin-react";

<Input size="sm" placeholder="Filter…" aria-label="Filter" />
<Input placeholder="Search invoices…" aria-label="Search" />
<Input size="lg" placeholder="Full name" aria-label="Name" />

With adornments

import { Input } from "@loom/muslin-react";

<Input
  aria-label="Monthly price"
  prefix="€"
  suffix="per month"
  clearable
/>