All components
Field
Label, control, helper text, and error slots with vertical and horizontal orientations.
We never share your email.
Variants
We never share your email.
verticalWe never share your email.
horizontalInstall
zsh — field
1bunx stylexblocks add fieldUsage — Ark UI
field.tsx
123456789101112131415161718192021import * as stylex from "@stylexjs/stylex";import { Field } from "#components/ui/ark-ui/field.tsx";import { inputSizes, inputStyles, inputVariants } from "@stylexblocks/ui/recipes/input.ts";
export function Example() { return ( // Root wires label/control/helper-text ids and state; the orientation // prop switches between stacked and two-column layouts <Field.Root required orientation="vertical"> <Field.Label> Email <Field.RequiredIndicator /> </Field.Label> <Field.Input placeholder="you@company.com" {...stylex.props(inputStyles.base, inputSizes.md, inputVariants.outline)} /> <Field.HelperText>We never share your email.</Field.HelperText> </Field.Root> );}