pnpm dlx dreamy add fieldsetFieldset is a component that groups related form controls under a common name, making it easier to structure and manage forms.
<Fieldset.Root size="lg" maxW="sm" full>
<Fieldset.Header>
<Fieldset.Legend>Contact details</Fieldset.Legend>
<Fieldset.HelperText>
Please provide your contact details below.
</Fieldset.HelperText>
</Fieldset.Header>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" placeholder="Enter your name" />
</Field.Root>
<Field.Root>
<Field.Label>Email address</Field.Label>
<Input name="email" type="email" placeholder="Enter your email" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<Select.Root
items={[
{ value: "uk", label: "United Kingdom" },
{ value: "ca", label: "Canada" },
{ value: "us", label: "United States" },
]}
>
<Select.Trigger placeholder="Select a country" />
<Select.Content />
</Select.Root>
</Field.Root>
</Fieldset.Content>
<Fieldset.Footer>
<Button type="submit" variant="primary" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Footer>
</Fieldset.Root>Use the disabled prop to disable the fieldset, which disables all input elements within it.
<Fieldset.Root size="lg" disabled maxW="sm" full>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Fieldset.Content>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" placeholder="Enter street address" />
</Field.Root>
<Field.Root>
<Field.Label>Country</Field.Label>
<Select.Root
items={[
{ value: "uk", label: "United Kingdom" },
{ value: "ca", label: "Canada" },
{ value: "us", label: "United States" },
]}
>
<Select.Trigger placeholder="Select a country" />
<Select.Content />
</Select.Root>
</Field.Root>
<Field.Root>
<Field.Label>Delivery notes</Field.Label>
<Textarea name="notes" placeholder="Any special instructions?" />
</Field.Root>
</Fieldset.Content>
</Fieldset.Root>Use the invalid prop to mark the fieldset as invalid. This will show the error text.
Warning
Note: You need to pass the invalid prop to the Field component within the fieldset to make each input element invalid.<Fieldset.Root size="lg" invalid maxW="sm" full>
<Fieldset.Legend>Shipping details</Fieldset.Legend>
<Fieldset.Content>
<Field.Root>
<Field.Label>Street address</Field.Label>
<Input name="address" placeholder="Enter street address" />
</Field.Root>
<Field.Root invalid>
<Field.Label>Country</Field.Label>
<Select.Root
items={[
{ value: "uk", label: "United Kingdom" },
{ value: "ca", label: "Canada" },
{ value: "us", label: "United States" },
]}
>
<Select.Trigger placeholder="Select a country" />
<Select.Content />
</Select.Root>
</Field.Root>
<Field.Root invalid>
<Field.Label>Notes</Field.Label>
<Textarea name="notes" placeholder="Any special instructions?" />
</Field.Root>
</Fieldset.Content>
<Fieldset.ErrorText>
Some fields are invalid. Please check them.
</Fieldset.ErrorText>
</Fieldset.Root>Fieldset comes with three different sizes: sm, md (default), and lg.
<Fieldset.Root size="sm" maxW="sm" full>
<Fieldset.Header>
<Fieldset.Legend>Small Size</Fieldset.Legend>
<Fieldset.HelperText>
This is a small fieldset.
</Fieldset.HelperText>
</Fieldset.Header>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" placeholder="Enter your name" />
</Field.Root>
</Fieldset.Content>
<Fieldset.Footer>
<Button type="submit" variant="primary" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Footer>
</Fieldset.Root>
<Fieldset.Root size="md" maxW="sm" full>
<Fieldset.Header>
<Fieldset.Legend>Medium Size</Fieldset.Legend>
<Fieldset.HelperText>
This is a medium fieldset (default).
</Fieldset.HelperText>
</Fieldset.Header>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" placeholder="Enter your name" />
</Field.Root>
</Fieldset.Content>
<Fieldset.Footer>
<Button type="submit" variant="primary" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Footer>
</Fieldset.Root>
<Fieldset.Root size="lg" maxW="sm" full>
<Fieldset.Header>
<Fieldset.Legend>Large Size</Fieldset.Legend>
<Fieldset.HelperText>
This is a large fieldset.
</Fieldset.HelperText>
</Fieldset.Header>
<Fieldset.Content>
<Field.Root>
<Field.Label>Name</Field.Label>
<Input name="name" placeholder="Enter your name" />
</Field.Root>
</Fieldset.Content>
<Fieldset.Footer>
<Button type="submit" variant="primary" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Footer>
</Fieldset.Root>| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | md | The size of the fieldset |
| disabled | boolean | false | If true, the fieldset will be disabled |
| invalid | boolean | false | If true, the fieldset will be marked as invalid |
Standard HTML legend element props.
Standard HTML div element props. Wrapper component for legend and helper text.
Standard HTML div element props. Wrapper component for form controls.
Standard HTML div element props. Wrapper component for submit buttons and actions.
Standard HTML div element props.
Standard HTML div element props.