v0.0.1

Components

Input

Stable

Base text input with optional label, hint, and error states. Extends all native input HTML attributes.

Design system owned. Prefix/suffix symbols, leading icons, and required indicators are handled by this component — pass props, don't add wrapper divs. Engineers should not manually position absolute spans or hardcode focus rings around inputs.

Default

With label & hint

Email address

We'll never share your email.

Error state

Username

Username is already taken.

Disabled

Read-only field

With prefix

Amount

$

With suffix

Rate

%

With leading icon

Search

Required field

Full name

InputStack

Use layout="stacked" to render label, input, hint/error, and an action button in a vertical stack.

Figma component: InputStack — linked here because nested Code Connect instances are not yet supported in Figma Dev Mode.

Default

Email

This is your public display name.

With required

Email

This is your public display name.

Error

When error is set, it replaces the hint text and the border turns red.

Email

This is your public display name.

Disabled

Pass disabled to the Input and the action Button to disable the entire group.

Email

This is your public display name.

Without hint

Email

Without button

Email

This is your public display name.

InputInline

Use layout="inline" to place the action beside the field — ideal for newsletter sign-ups and quick-submit forms. Hint text is hidden in inline mode.

Figma component: InputInline — linked here because nested Code Connect instances are not yet supported in Figma Dev Mode.

Default

Email

With required

Email

Error

Email

Invalid email address.

Disabled

Email

Without label

Usage

import { Input } from "@mnee-ui/ui"

Props

Prop	Type	Default	Description
label	string	—	Label text rendered above the input
hint	string	—	Helper text shown below (hidden when error is set)
error	string	—	Error message; applies error styling and aria-invalid
prefix	string	—	Text adornment inside the left edge of the border (e.g. "$", "https://")
suffix	string	—	Text adornment inside the right edge of the border (e.g. "%", ".com")
leadingIcon	ReactNode	—	Icon at the left of the input — pass a Lucide icon; size and color are design-system controlled
trailingIcon	ReactNode	—	Icon at the right of the input
required	boolean	false	Marks the field as required; renders a red * after the label text
disabled	boolean	false	Disables the input
placeholder	string	—	Placeholder text
className	string	—	Layout utilities only (margin, width) — applied to the outer field wrapper
layout	"stacked" \| "inline"	—	stacked: renders action below the field; inline: renders action beside it (hint hidden)
action	ReactNode	—	Action element (e.g. Button) placed via the layout slot