# Input (/docs/input)
## API Reference [#api-reference]
## Basic [#basic]
{`
import { Field, FieldLabel, Input } from "moduix";
export function InputDemo() {
return (
Name
);
}
`}
{`
.field {
width: min(20rem, 100%);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
`Input` is composed as a single native input root. It is commonly composed inside `Field` for labels,
descriptions, and validation messaging.
```text
Field (optional wrapper)
└─ Input
```
| Part | Role |
| ------- | ------------------------------------------------------------------------ |
| `Input` | Native input element with Base UI state integration and style variables. |
## Composition [#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:
```tsx
```
`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:
```tsx
import { type InputChangeEventDetails, type InputChangeEventReason, type InputState } from 'moduix';
```
## Examples [#examples]
### Controlled [#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 (
Username
);
}
`}
{`
.field {
width: min(20rem, 100%);
}
`}
### Sizes [#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 (
);
}
`}
{`
.stack {
display: grid;
gap: var(--spacing-3);
width: min(20rem, 100%);
}
`}
### Native Attributes [#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 (
Security code
);
}
`}
{`
.field {
width: min(20rem, 100%);
}
`}
### Disabled [#disabled]
Set `disabled` to prevent interaction while keeping the input visible in forms.
{`
import { Input } from "moduix";
export function DisabledInputDemo() {
return (
);
}
`}
{`
.stack {
display: grid;
gap: var(--spacing-3);
width: min(20rem, 100%);
}
`}
### Field Validation [#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 (
EmailPlease enter your email.Enter a valid email address.
);
}
`}
{`
.field {
width: min(20rem, 100%);
}
`}
### Custom Styles [#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 (
Project key
);
}
`}
{`
.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);
}
`}