LibreChatInput
Single-line text fields, with labels and validation states.
Input is the text field used in LibreChat's forms. Pair it with Label, and give every field an id from React's useId() so the label still points at the right field when the component renders more than once.
Default
import { useId } from 'react'
import { Input, Label } from '@librechat/client'
export default function InputDefault() {
const id = useId()
return (
<div className="grid w-full max-w-sm gap-2">
<Label htmlFor={id}>Display name</Label>
<Input id={id} placeholder="Ada Lovelace" />
</div>
)
}Invalid
Mark a field that failed validation with aria-invalid, and tie the message to it with aria-describedby. The field draws its border in the theme's destructive color.
import { useId } from 'react'
import { Input, Label } from '@librechat/client'
export default function InputInvalid() {
const id = useId()
return (
<div className="grid w-full max-w-sm gap-2">
<Label htmlFor={id}>Email</Label>
<Input id={id} defaultValue="ada@" aria-invalid aria-describedby={`${id}-error`} />
<span id={`${id}-error`} role="alert" className="text-text-destructive text-sm">
Enter a complete email address.
</span>
</div>
)
}Props
Input accepts every native input attribute. The ones it styles:
| Prop | Type | Description |
|---|---|---|
aria-invalid | boolean | Draws the destructive border and tells assistive technology the value is invalid. |
disabled | boolean | Dims the field and blocks editing. |
placeholder | string | Example text shown while the field is empty. It is not a label. |
Accessibility
- Every field needs a visible label:
LabelwithhtmlFor, oraria-labelledby. - Ids come from
useId(), never a literal string. - Error text uses the
text-text-destructivetoken androle="alert"so it is announced when it appears.
How is this guide?