Input — Atelier

Demo

Live PreviewReact

jsx

<LlmInput type="email" placeholder="you@example.com" />
<LlmInput type="password" placeholder="Password" />
<LlmInput invalid={true} placeholder="Invalid state" />
<LlmInput disabled={true} placeholder="Disabled" />

API (Angular)

Prop	Type	Default	Description
`[(value)]`	`string`	`''`	Controlled value
`(valueChange)`	`(value: string) => void`	`—`	Called when the input value changes
`type`	`'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url'`	`'text'`	Input type
`placeholder`	`string`	`''`	Placeholder text
`disabled`	`boolean`	`false`	Disables the input
`readonly`	`boolean`	`false`	Makes the input read-only
`invalid`	`boolean`	`false`	Applies invalid/error styling
`required`	`boolean`	`false`	Marks field as required
`name`	`string`	`''`	HTML name attribute for form submission

Import

import { LlmInput } from '@atelier-ui/angular';

Explore in Storybook

Prototyping with AI

Best practices

Explicitly state the "type" property to ensure correct mobile keyboards.
Always provide a meaningful "placeholder" to improve form scannability.
Use the "invalid" prop combined with LlmAlert for accessible error feedback.

Common hallucinations

AI often uses "onChange" (standard React/DOM) instead of "onValueChange".
AI may forget that "LlmInput" is a controlled component and needs state management.

Example prompt

Create a required LlmInput for email with a placeholder "name@company.com".