Maofeng
4efe3f3c64
Add Vite, React, MDX, and Tailwind documentation infrastructure. Document component, handbook, overview, and utility routes. Add interactive examples for every component family. Deduplicate React resolution and load the Tailwind 4 theme configuration.
67 lines
2.0 KiB
Plaintext
67 lines
2.0 KiB
Plaintext
# Fieldset
|
|
|
|
Fieldset wraps Base UI's fieldset primitive with the Tailwind classes from the official Base UI example.
|
|
|
|
::example{src="components/fieldset/fieldset.tsx"}
|
|
|
|
## Anatomy
|
|
|
|
### Base UI Style
|
|
|
|
```tsx
|
|
import Field from "@/components/ui/field"
|
|
import Fieldset from "@/components/ui/fieldset"
|
|
|
|
<Fieldset.Root>
|
|
<Fieldset.Legend>Billing details</Fieldset.Legend>
|
|
<Field.Root>
|
|
<Field.Label>Company</Field.Label>
|
|
<Field.Control />
|
|
</Field.Root>
|
|
</Fieldset.Root>
|
|
```
|
|
|
|
### Shadcn Style
|
|
|
|
```tsx
|
|
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
|
|
```
|
|
|
|
## Composition
|
|
|
|
Use the following composition to build `Fieldset`:
|
|
|
|
```txt
|
|
Fieldset
|
|
└── FieldsetLegend
|
|
```
|
|
|
|
|
|
## API Reference
|
|
|
|
Official API: [Base UI Fieldset API](https://base-ui.com/react/components/fieldset#api-reference).
|
|
|
|
This wrapper preserves the underlying Base UI Fieldset API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.
|
|
|
|
### Root
|
|
|
|
`Fieldset` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
|
|
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
|
|
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
|
|
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |
|
|
|
|
### Legend
|
|
|
|
`Fieldset.Legend` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|