ElyriInput
Text inputs with three sizes and an invalid state, forwarding everything else to the native input.
Installation
Add component
pnpm dlx @elyri/cli@latest add inputExamples
Basic
The default input, just a placeholder.
import { Input } from './components/elyri/Input';
export function Example() {
return <Input placeholder="you@example.com" />;
}Sizes
Three sizes: sm / md / lg.
import { Input } from './components/elyri/Input';
export function Example() {
return (
<div className="demo-ui-row">
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
</div>
);
}Invalid
Field invalid drives the red border; Message shows the error.
Enter a valid email address.
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field invalid>
<Field.Label>Email</Field.Label>
<Input placeholder="you@example.com" defaultValue="hello@elyri.dev" />
<Field.Message>Enter a valid email address.</Field.Message>
</Field>
);
}Disabled
Field disabled propagates to the control and greys the label.
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';
export function Example() {
return (
<Field disabled>
<Field.Label>Email</Field.Label>
<Input placeholder="Not available" />
</Field>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Control size: sm / md / lg |
invalid | boolean | false | Invalid state: red border plus aria-invalid |
...rest | InputHTMLAttributes | — | Remaining props are forwarded to the native input |