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>
<Select.Trigger placeholder="Select a country" />
<Select.Content>
<Select.Item value="uk">United Kingdom</Select.Item>
<Select.Item value="ca">Canada</Select.Item>
<Select.Item value="us">United States</Select.Item>
</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>
<Select.Trigger placeholder="Select a country" />
<Select.Content>
<Select.Item value="uk">United Kingdom</Select.Item>
<Select.Item value="ca">Canada</Select.Item>
<Select.Item value="us">United States</Select.Item>
</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>
<Select.Trigger placeholder="Select a country" />
<Select.Content>
<Select.Item value="uk">United Kingdom</Select.Item>
<Select.Item value="ca">Canada</Select.Item>
<Select.Item value="us">United States</Select.Item>
</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.