Heimerle + Meule Logo
Heimerle + Meule

Input

Inputs allow users to enter, edit, and review text-based information within forms and interactive experiences.

Quick Start

Use an Input to collect a single line of text from a user.

1import { Input } from "@ecos/ui";
2
3<Input label="First name" />

Variants

Variants provide different visual treatments for text input.

Outlined

Filled

Custom

1<Input
2  label="First name"
3  variant="outlined"
4/>
5
6<Input
7  label="First name"
8  variant="filled"
9/>
10
11<Input
12  label="First name"
13  variant="custom"
14/>

Floating Labels

Labels automatically float when the field receives focus or contains a value.

1<Input
2  label="Email address"
3  defaultValue="user@example.com"
4/>

Placeholders

Placeholders can be used to provide example values or formatting guidance.

Email

Phone Number

Website

name@example.com
+44 1234 567890
https://example.com
1<Input
2label="Email address"
3placeholder="name@example.com"
4/>
5
6<Input
7label="Phone number"
8placeholder="+44 1234 567890"
9/>
10
11<Input
12label="Website"
13placeholder="https://example.com"
14/>

Help Text

Use help text to provide additional context or guidance.

Choose a unique username.

1<Input
2  label="Username"
3  helpText="Choose a unique username."
4/>

Required Fields

Use the required prop to indicate mandatory fields.

1<Input
2  label="Email address"
3  required
4/>

Input States

Use the state prop to communicate validation feedback.

Please enter a valid email address.

Email address verified.

1<div className="space-y-4">
2  <Input
3    label="Default"
4    state="default"
5  />
6
7  <Input
8    label="Invalid email"
9    state="error"
10    helpText="Please enter a valid email address."
11  />
12
13  <Input
14    label="Valid email"
15    state="success"
16    defaultValue="user@example.com"
17    helpText="Email address verified."
18  />
19</div>

Left Icon

Icons can be displayed before the input value.

1<Input
2  label="Search"
3  leftIcon={<Search />}
4/>

Right Icon

Icons can be displayed after the input value.

1<Input
2  label="Password"
3  type="password"
4  rightIcon={<Eye />}
5/>

Both Icons

Inputs can display both leading and trailing icons.

1<Input
2  label="Search"
3  leftIcon={<Search />}
4  rightIcon={<Eye />}
5/>

Disabled State

Disable an input when interaction is unavailable.

1<Input
2  label="Account ID"
3  defaultValue="12345"
4  disabled
5/>

Controlled Usage

Manage the input value externally using React state.

1const [value, setValue] = useState("");
2
3<Input
4  label="First name"
5  value={value}
6  onChange={(event) => setValue(event.target.value)}
7/>

Common Input Types

Inputs support all standard HTML input types.

Text

Email

Password

Number

URL

1<Input
2  type="text"
3  label="Full name"
4/>
5
6<Input
7  type="email"
8  label="Email address"
9/>
10
11<Input
12  type="password"
13  label="Password"
14/>
15
16<Input
17  type="number"
18  label="Quantity"
19/>
20
21<Input
22  type="url"
23  label="Website"
24/>

API Reference

Property

Type

Default

Description

labelstring-Floating label displayed for the input.
placeholderstring-Placeholder text displayed when no value is entered.
helpTextstring-Additional supporting text displayed beneath the input.
variant"outlined" | "filled" | "custom""outlined"Determines the visual appearance of the input.
state"default" | "error" | "success""default"Displays validation and status styling.
leftIconReactNode-Displays content before the input value.
rightIconReactNode-Displays content after the input value.
requiredbooleanfalseMarks the field as required.
disabledbooleanfalsePrevents user interaction.
type"text" | "email" | "password" | "number" | "tel" | "url" | string"text"The HTML input type.
classNamestring-Additional classes applied to the input container.

Visual Reference

Configuration

Preview

Outlined
Filled
Custom
Required
Error

Please enter a valid email address.

Success

Email address verified.

Left Icon
Right Icon
Disabled