Input
A native input element that works with Field labels, validation, and Base UI state.
API Reference
Original primitive API
Behavior, accessibility details, and low-level props are documented by Base UI.
Basic
import { Field, FieldLabel, Input } from "moduix";export function InputDemo() { return ( <Field className={styles.field}> <FieldLabel>Name</FieldLabel> <Input placeholder="Enter your name" /> </Field> );}.field { width: min(20rem, 100%);}Full list of component variables available for project-level overrides.
| Property | Default | Description |
|---|---|---|
| --input-bg | var(--color-background) | Controls the input background color. |
| --input-border-color | var(--color-border) | Controls the input border color. |
| --input-border-color-invalid | var(--color-destructive) | Controls invalid border and focus ring color. |
| --input-border-style | solid | Controls the input border style. |
| --input-border-width | var(--border-width-sm) | Controls the input border width. |
| --input-color | var(--color-foreground) | Controls the input text color. |
| --input-disabled-opacity | var(--opacity-disabled) | Controls disabled input opacity. |
| --input-focus-ring-color | var(--color-ring) | Controls focus ring color. |
| --input-focus-ring-offset | depends on focus ring width | Controls focus ring offset. |
| --input-focus-ring-width | depends on border width | Controls focus ring width. |
| --input-font-size | var(--text-md) | Controls default font size. |
| --input-font-size-xs | var(--text-xs) | Controls extra-small input font size. |
| --input-font-size-sm | var(--text-sm) | Controls small input font size. |
| --input-font-size-md | var(--text-md) | Controls medium input font size. |
| --input-font-size-lg | var(--text-lg) | Controls large input font size. |
| --input-font-size-xl | var(--text-lg) | Controls extra-large input font size. |
| --input-height | var(--size-lg) | Controls the default input minimum height. |
| --input-height-xs | var(--size-sm) | Controls extra-small input height. |
| --input-height-sm | 2rem | Controls small input height. |
| --input-height-md | var(--size-lg) | Controls medium input height. |
| --input-height-lg | var(--size-xl) | Controls large input height. |
| --input-height-xl | 3rem | Controls extra-large input height. |
| --input-line-height | var(--line-height-text-md) | Controls default line height. |
| --input-line-height-xs | var(--line-height-text-xs) | Controls extra-small line height. |
| --input-line-height-sm | var(--line-height-text-sm) | Controls small line height. |
| --input-line-height-md | var(--line-height-text-md) | Controls medium line height. |
| --input-line-height-lg | var(--line-height-text-lg) | Controls large line height. |
| --input-line-height-xl | var(--line-height-text-lg) | Controls extra-large line height. |
| --input-max-width | none | Controls the input max width. |
| --input-padding-x | 0.875rem | Controls default horizontal padding. |
| --input-padding-x-xs | 0.625rem | Controls extra-small horizontal padding. |
| --input-padding-x-sm | 0.75rem | Controls small horizontal padding. |
| --input-padding-x-md | 0.875rem | Controls medium horizontal padding. |
| --input-padding-x-lg | 1rem | Controls large horizontal padding. |
| --input-padding-x-xl | 1.125rem | Controls extra-large horizontal padding. |
| --input-padding-y | 0.5rem | Controls default vertical padding. |
| --input-padding-y-xs | 0.25rem | Controls extra-small vertical padding. |
| --input-padding-y-sm | 0.3125rem | Controls small vertical padding. |
| --input-padding-y-md | 0.5rem | Controls medium vertical padding. |
| --input-padding-y-lg | 0.625rem | Controls large vertical padding. |
| --input-padding-y-xl | 0.75rem | Controls extra-large vertical padding. |
| --input-placeholder-color | var(--color-muted-foreground) | Controls placeholder color. |
| --input-radius | var(--radius-md) | Controls input corner radius. |
| --input-transition | var(--transition-default) | Controls state transition timing. |
| --input-width | 100% | Controls the input width. |
Interactive variables scoped for docs preview without changing size scale tokens.
| Property | Value | Default | Description |
|---|---|---|---|
| --input-bg | var(--color-background) | Controls the input background color. | |
| --input-border-color | var(--color-border) | Controls the input border color. | |
| --input-border-color-invalid | var(--color-destructive) | Controls invalid border and focus ring color. | |
| --input-border-style | solid | Controls the input border style. | |
| --input-border-width | var(--border-width-sm) | Controls the input border width. | |
| --input-color | var(--color-foreground) | Controls the input text color. | |
| --input-disabled-opacity | var(--opacity-disabled) | Controls disabled input opacity. | |
| --input-focus-ring-color | var(--color-ring) | Controls focus ring color. | |
| --input-focus-ring-offset | depends on focus ring width | Controls focus ring offset. | |
| --input-focus-ring-width | depends on border width | Controls focus ring width. | |
| --input-font-size | var(--text-md) | Controls default font size. | |
| --input-font-size-xs | var(--text-xs) | Controls extra-small input font size. | |
| --input-font-size-sm | var(--text-sm) | Controls small input font size. | |
| --input-font-size-md | var(--text-md) | Controls medium input font size. | |
| --input-font-size-lg | var(--text-lg) | Controls large input font size. | |
| --input-font-size-xl | var(--text-lg) | Controls extra-large input font size. | |
| --input-height | var(--size-lg) | Controls the default input minimum height. | |
| --input-height-xs | var(--size-sm) | Controls extra-small input height. | |
| --input-height-sm | 2rem | Controls small input height. | |
| --input-height-md | var(--size-lg) | Controls medium input height. | |
| --input-height-lg | var(--size-xl) | Controls large input height. | |
| --input-height-xl | 3rem | Controls extra-large input height. | |
| --input-line-height | var(--line-height-text-md) | Controls default line height. | |
| --input-line-height-xs | var(--line-height-text-xs) | Controls extra-small line height. | |
| --input-line-height-sm | var(--line-height-text-sm) | Controls small line height. | |
| --input-line-height-md | var(--line-height-text-md) | Controls medium line height. | |
| --input-line-height-lg | var(--line-height-text-lg) | Controls large line height. | |
| --input-line-height-xl | var(--line-height-text-lg) | Controls extra-large line height. | |
| --input-max-width | none | Controls the input max width. | |
| --input-padding-x | 0.875rem | Controls default horizontal padding. | |
| --input-padding-x-xs | 0.625rem | Controls extra-small horizontal padding. | |
| --input-padding-x-sm | 0.75rem | Controls small horizontal padding. | |
| --input-padding-x-md | 0.875rem | Controls medium horizontal padding. | |
| --input-padding-x-lg | 1rem | Controls large horizontal padding. | |
| --input-padding-x-xl | 1.125rem | Controls extra-large horizontal padding. | |
| --input-padding-y | 0.5rem | Controls default vertical padding. | |
| --input-padding-y-xs | 0.25rem | Controls extra-small vertical padding. | |
| --input-padding-y-sm | 0.3125rem | Controls small vertical padding. | |
| --input-padding-y-md | 0.5rem | Controls medium vertical padding. | |
| --input-padding-y-lg | 0.625rem | Controls large vertical padding. | |
| --input-padding-y-xl | 0.75rem | Controls extra-large vertical padding. | |
| --input-placeholder-color | var(--color-muted-foreground) | Controls placeholder color. | |
| --input-radius | var(--radius-md) | Controls input corner radius. | |
| --input-transition | var(--transition-default) | Controls state transition timing. | |
| --input-width | 100% | Controls the input width. |
Anatomy
Input is composed as a single native input root. It is commonly composed inside Field for labels,
descriptions, and validation messaging.
Field (optional wrapper)
└─ Input| Part | Role |
|---|---|
Input | Native input element with Base UI state integration and style variables. |
Composition
Use Input props such as value, defaultValue, onValueChange, render, function className,
function style, and Field state data attributes from Base UI.
Use size for the visual component size. Use htmlSize for the native HTML size attribute:
<Input size="lg" htmlSize={24} placeholder="Search projects" />Input does not render hidden service slots such as Positioner, Backdrop, or Viewport, so it
does not need a classNames API. Style the input element directly with className.
The package exports Base UI event and state types for controlled inputs and styling callbacks:
import { type InputChangeEventDetails, type InputChangeEventReason, type InputState } from 'moduix';Examples
Controlled
Use value and onValueChange when the input value needs to stay in React state.
import { Field, FieldLabel, Input } from "moduix";import { useState } from "react";function ControlledInput() { const [value, setValue] = useState(""); return ( <Field className={styles.field}> <FieldLabel>Username</FieldLabel> <Input value={value} onValueChange={setValue} placeholder="Type to control value" /> </Field> );}.field { width: min(20rem, 100%);}Sizes
Use the size prop for visual sizing. Use htmlSize when you need the native input size attribute.
import { Input } from "moduix";export function InputSizesDemo() { return ( <div className={styles.stack}> <Input size="xs" placeholder="Extra-small input" /> <Input size="sm" placeholder="Small input" /> <Input size="md" placeholder="Medium input" /> <Input size="lg" placeholder="Large input" /> <Input size="xl" placeholder="Extra-large input" /> </div> );}.stack { display: grid; gap: var(--spacing-3); width: min(20rem, 100%);}Native Attributes
Use standard input attributes for keyboard, autocomplete, validation, and form behavior. The htmlSize prop maps to the native size attribute because size controls the visual component size.
import { Field, FieldLabel, Input } from "moduix";export function NativeInputAttributesDemo() { return ( <Field className={styles.field}> <FieldLabel>Security code</FieldLabel> <Input htmlSize={8} inputMode="numeric" maxLength={6} name="security-code" placeholder="000000" type="text" autoComplete="one-time-code" /> </Field> );}.field { width: min(20rem, 100%);}Disabled
Set disabled to prevent interaction while keeping the input visible in forms.
import { Input } from "moduix";export function DisabledInputDemo() { return ( <div className={styles.stack}> <Input disabled placeholder="Disabled input" /> <Input disabled value="Read only value" /> </div> );}.stack { display: grid; gap: var(--spacing-3); width: min(20rem, 100%);}Field Validation
Place Input inside Field to connect labels, errors, native validity, and Base UI data attributes.
import { Field, FieldLabel, Input, FieldError } from "moduix";export function InputFieldValidationDemo() { return ( <Field className={styles.field} validationMode="onBlur"> <FieldLabel>Email</FieldLabel> <Input required type="email" placeholder="name@example.com" /> <FieldError match="valueMissing">Please enter your email.</FieldError> <FieldError match="typeMismatch">Enter a valid email address.</FieldError> </Field> );}.field { width: min(20rem, 100%);}Custom Styles
Pass className directly to Input when styling with CSS Modules, Tailwind CSS, or CSS-in-JS.
import { Field, FieldLabel, Input } from "moduix";export function CustomInputDemo() { return ( <Field className={styles.field}> <FieldLabel>Project key</FieldLabel> <Input placeholder="MAPS" className={styles.customInput} /> </Field> );}.field { width: min(20rem, 100%);}.customInput { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); background-color: color-mix(in srgb, var(--color-primary) 5%, transparent); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0;}.customInput::placeholder { text-transform: none;}.customInput:focus { outline-color: var(--color-primary);}