All components
Fieldset
Group related fields under a legend with helper text and spacing tuned per size.
Sizes
sm
md
lg
Install
zsh — fieldset
1bunx stylexblocks add fieldsetUsage — Base UI
fieldset.tsx
1234567891011121314151617181920212223import * as stylex from "@stylexjs/stylex";import { Field } from "#components/ui/base-ui/field.tsx";import { Fieldset } from "#components/ui/base-ui/fieldset.tsx";import { inputSizes, inputStyles, inputVariants } from "@stylexblocks/ui/recipes/input.ts";
export function Example() { return ( // size resolves once on Root; Legend and Content inherit it via context <Fieldset.Root size="md"> <Fieldset.Legend>Contact details</Fieldset.Legend> <Fieldset.HelperText>Used for order updates only.</Fieldset.HelperText> <Fieldset.Content> <Field.Root> <Field.Label>Full name</Field.Label> <Field.Control placeholder="Ada Lovelace" {...stylex.props(inputStyles.base, inputSizes.sm, inputVariants.outline)} /> </Field.Root> </Fieldset.Content> </Fieldset.Root> );}