Input
A single-line text field. Always pair it with a visible label, using Field or Control and label.
Code
demo.tsx
import {Field, Input} from '@earendil-works/elanor-react';
export default function InputDemo() {
return (
<Field.Root name="email">
<Field.Label>Email</Field.Label>
<Input type="email" autoComplete="email" placeholder="name@example.com" />
</Field.Root>
);
}Usage
import {Field, Input} from '@earendil-works/elanor-react';
<Field.Root name="email">
<Field.Label>Email</Field.Label>
<Input type="email" />
</Field.Root>;type accepts text, email, password, tel, and url. For search, use Search; for multiple lines, use Text area; for other native types, use Field.Control.
Read-only
Read-only values can be focused, selected, and copied, and are submitted with the form.
Code
read-only.tsx
import {Field, Input} from '@earendil-works/elanor-react';
export default function InputReadOnly() {
return (
<Field.Root name="workspaceId">
<Field.Label>Workspace ID</Field.Label>
<Input defaultValue="workspace-2048" readOnly />
</Field.Root>
);
}Disabled
Disabled inputs can’t be focused and aren’t submitted. Set disabled on Field.Root to disable the label too.
Code
disabled.tsx
import {Field, Input} from '@earendil-works/elanor-react';
export default function InputDisabled() {
return (
<Field.Root name="inviteCode" disabled>
<Field.Label>Invitation code</Field.Label>
<Input placeholder="Invitations are closed" />
</Field.Root>
);
}API
Input
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'text' | 'tel' | 'url' | 'email' | 'password' | 'text' | Text-like input types. Other types throw; use Search for search. |
Also accepts Base UI Input props.