Components
Loading preview...
A text field allows a user to enter a plain text value with a keyboard. Text fields can be built with <input> or <textarea> and <label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/textfieldimport { Label } from "@/components/ui/field"
import { Input, TextField } from "@/components/ui/textfield"
function TextFieldDemo() {
return (
<TextField>
<Label>First name</Label>
<Input />
</TextField>
)
}
export { TextFieldDemo }