Input

Single-line text input with label, hint, and error states.

Props#

Name	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`placeholder`	`string`	—	Placeholder shown when the input is empty.
`label`	`string`	—	Label rendered above the input.
`hint`	`string`	—	Helpful hint shown below the input.
`error`	`string`	—	Error message shown below the input — replaces the hint and applies error styling.
`disabled`	`boolean`	`false`	Disable the input.
`type`	`"number" \| "text" \| "email" \| "password" \| "tel" \| "url"`	`text`	HTML input type.
`onChange`	`((value: string) => void)`	—	Change handler — receives the new value.

Default#

Show code

Default.stories.tsx

import { Input } from '../../../src/pixie/Input.js';

export default () => <Input placeholder="Type here..." />;

With label and hint#

Show code

WithLabelAndHint.stories.tsx

import { Input } from '../../../src/pixie/Input.js';

export default () => (
  <Input label="Display name" placeholder="e.g. Tudor" hint="Visible to other users." />
);

Error state#

Show code

ErrorState.stories.tsx

import { Input } from '../../../src/pixie/Input.js';

export default () => (
  <Input label="Email" defaultValue="not-an-email" error="Enter a valid email address." />
);

Disabled#

Show code

Disabled.stories.tsx

import { Input } from '../../../src/pixie/Input.js';

export default () => <Input label="API key" defaultValue="sk-…" disabled />;