All componentsverticalhorizontal
Field
Label, control, helper text, and error slots with vertical and horizontal orientations.
We never share your email.
Variants
We never share your email.
We never share your email.
Install
zsh — field
1bunx stylexblocks add fieldUsage — Base UI
field.tsx
12345678910111213141516171819202122import * as stylex from "@stylexjs/stylex";import { Field } from "#components/ui/base-ui/field.tsx";import { inputSizes, inputStyles, inputVariants } from "@stylexblocks/ui/recipes/input.ts";
export function Example() { return ( // Root wires label/control/validation state; Error renders automatically // when the control is invalid <Field.Root orientation="vertical"> <Field.Label> Email <Field.RequiredIndicator /> </Field.Label> <Field.Control required placeholder="you@company.com" {...stylex.props(inputStyles.base, inputSizes.md, inputVariants.outline)} /> <Field.Description>We never share your email.</Field.Description> </Field.Root> );}