Input

Input accepts native input attributes and wires label, helper text, error text, aria-describedby, and aria-invalid.

import { Input } from '@manti-ui/react';

export default function InputBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*5)]">
      <Input
        label="Recipe name"
        placeholder="Kayseri mantısı"
        hint="Shown to everyone browsing the cookbook."
      />
    </div>
  );
}

Left and right content

Use left and right to place text or any React node inside the input frame. Both slots share the control's focus, invalid, filled, and disabled states. This makes them suitable for units, currency symbols, icons, badges, shortcuts, or small actions.

Spacing follows the kind of content. A text slot reads as part of the value and keeps the control's padding-x. Anything else is an element that paints its own box, so the control hands that side's padding to the slot, which insets it by --manti-field-addon-padding-x instead. Buttons, icons, and shortcut keys land near the frame edge without stacking two paddings.

Give icon-only interactive content its own accessible label. left and right replace the deprecated leadingAddon and trailingAddon names; the old props remain available for backwards compatibility.

Price

$USD

Discount code

Ctrl+K

Appearance and state

Use variant="fill" for a neutral filled control. size, error, disabled, and native attributes work across both appearances.

requiredIndicator={null} keeps native required semantics without adding a visible marker. When another product shell owns the visible focus treatment, set focusRing="none". The forwarded ref always targets the native input.

Small

Medium

Large

Recipe name

This recipe name is already taken.

Locked recipe

Passwords

type="password" adds a reveal button and Caps Lock warning. Control them with the password-specific props; those props are ignored for other input types.

Password

Use at least 8 characters. Toggle Caps Lock to see the warning.

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Field label, associated with the input.
`hint`	`ReactNode`	—	Helper text shown below the control when there is no error.
`error`	`ReactNode`	—	Error message. Presence sets the invalid state and replaces the hint.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`'default' \| 'fill'`	`'default'`	Visual treatment for the control.
`fullWidth`	`boolean`	—	Stretch to fill the available inline space.
`left`	`ReactNode`	—	Text or custom content rendered to the left of the input.
`right`	`ReactNode`	—	Text or custom content rendered to the right of the input.
`leadingAddon`	`ReactNode`	—	Deprecated alias for left.
`trailingAddon`	`ReactNode`	—	Deprecated alias for right.
`requiredIndicator`	`ReactNode \| null`	`'*'`	Visual marker for required fields. Null hides only the marker.
`focusRing`	`'control' \| 'none'`	`'control'`	Choose whether the Manti control owns visible focus.
`...rest`	`InputHTMLAttributes`	—	Any native input attribute (placeholder, type, value, disabled, required…).
`showPasswordToggle`	`boolean`	`true`	type="password" only — render the show/hide toggle button.
`passwordVisible`	`boolean`	—	type="password" only — controlled visibility of the password text.
`defaultPasswordVisible`	`boolean`	`false`	type="password" only — initial visibility for uncontrolled usage.
`onPasswordVisibilityChange`	`(visible: boolean) => void`	—	type="password" only — called whenever the visibility is toggled.
`showCapsLockWarning`	`boolean`	`true`	type="password" only — warn while Caps Lock is on.
`capsLockLabel`	`ReactNode`	`'Caps Lock is on'`	type="password" only — Caps Lock wording. Shown to assistive tech only; the warning reads as an icon on screen.
`showPasswordLabel`	`string`	`'Show password'`	type="password" only — accessible label for the toggle while hidden.
`hidePasswordLabel`	`string`	`'Hide password'`	type="password" only — accessible label for the toggle while shown.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="field"][data-part="root"]`	The field container.
`label`	`[data-scope="field"][data-part="label"]`	The field label.
`required`	`[data-scope="field"][data-part="required"]`	The required asterisk (when required).
`control`	`[data-scope="field"][data-part="control"]`	The input frame, holding addons and the input.
`addon`	`[data-scope="field"][data-part="addon"]`	Content in the left or right slot of the input frame. Carries data-position and data-slot ("text" or "node").
`input`	`[data-scope="field"][data-part="input"]`	The native text input.
`visibility-trigger`	`[data-scope="field"][data-part="visibility-trigger"]`	The show/hide button (type="password" only).
`caps-lock`	`[data-scope="field"][data-part="caps-lock"]`	The Caps Lock icon (type="password", while Caps Lock is on).
`caps-lock-label`	`[data-scope="field"][data-part="caps-lock-label"]`	The Caps Lock wording. Visually hidden — kept for assistive tech.
`hint`	`[data-scope="field"][data-part="hint"]`	Helper text below the control.
`error`	`[data-scope="field"][data-part="error"]`	Error message below the control (when error).

Input and Textarea share the field scope.

Tokens

Token	Controls
`--manti-field-height`	height
`--manti-field-padding-x`	padding x
`--manti-field-padding-y`	padding y
`--manti-field-font-size`	font size
`--manti-field-addon-padding-x`	addon padding x

Last updated 13 September 2026