Input

A text input field with built-in label, error handling, icon slots, and size variants.

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Default() {
6  return <Input placeholder="Enter your email" />;
7}

Installation

pnpm dlx mateui add input

Anatomy

1import { Input } from '@/components/ui/input';

1<Input label="Email" placeholder="you@example.com" />

Variants

Default

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Default() {
6  return <Input placeholder="Enter your email" />;
7}

With Label

Input with a built-in label using the label prop.

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function WithLabel() {
6  return <Input label="Email" placeholder="you@example.com" type="email" />;
7}

With Error

Validation error state with accessible error messaging.

Please enter a valid email address

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function WithError() {
6  return (
7    <Input
8      label="Email"
9      placeholder="you@example.com"
10      type="email"
11      error="Please enter a valid email address"
12      defaultValue="invalid-email"
13    />
14  );
15}

With Icons

Input with left and/or right icon slots.

Password

1'use client';
2
3import { Search01Icon, ViewIcon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Input } from '@/components/ui/input';
6
7export function WithIcon() {
8  return (
9    <div className="flex flex-col gap-4">
10      <Input placeholder="Search..." leftIcon={<HugeiconsIcon icon={Search01Icon} size={16} />} />
11      <Input
12        label="Password"
13        type="password"
14        placeholder="Enter password"
15        rightIcon={<HugeiconsIcon icon={ViewIcon} size={16} />}
16      />
17    </div>
18  );
19}

Sizes

Three size variants: sm, default, and lg.

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Sizes() {
6  return (
7    <div className="flex flex-col gap-4">
8      <Input size="sm" placeholder="Small input" />
9      <Input size="default" placeholder="Default input" />
10      <Input size="lg" placeholder="Large input" />
11    </div>
12  );
13}

Disabled

A disabled state prevents all interactions.

1'use client';
2
3import { Input } from '@/components/ui/input';
4
5export function Disabled() {
6  return <Input label="Email" placeholder="you@example.com" disabled />;
7}

Compound Components

The Input also exposes sub-components for custom layouts:

1<Input.Wrapper>
2  <Input.Label htmlFor="custom">Custom Layout</Input.Label>
3  <Input.Description>Helper text goes here.</Input.Description>
4  <input id="custom" />
5  <Input.Error>Something went wrong.</Input.Error>
6</Input.Wrapper>

API Reference

Input

Prop	Type	Default	Description
`label`	`string`	—	Label text rendered above the input.
`error`	`string`	—	Error message displayed below the input.
`description`	`string`	—	Helper text displayed between the label and input.
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`	The size of the input field.
`leftIcon`	`React.ReactNode`	—	Icon displayed on the left side of the input.
`rightIcon`	`React.ReactNode`	—	Icon displayed on the right side of the input.
`disabled`	`boolean`	—	Disables the input.
`className`	`string`	—	Additional CSS class names.
`type`	`string`	`"text"`	The type of the input element.

Input.Wrapper

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The wrapper content.

Input.Label

Prop	Type	Default	Description
`htmlFor`	`string`	—	Associates with an input.
`className`	`string`	—	Additional CSS classes.

Input.Description

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The description text.

Input.Error

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The error message.

PreviousFiles NextKbd