# Fieldset

Groups related fields under a shared legend.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Fieldset.tsx)

## Overview

A fieldset groups related fields under a legend in a native `<fieldset>`. It sets the variant that nested fields inherit.

Use it for related controls, such as radios, checkboxes, or the parts of an address.

## Examples

### Basic

```tsx
import { Field, Fieldset, Input } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Fieldset.Root>
      <Fieldset.Legend>Recipient</Fieldset.Legend>
      <Name label="First name" />
      <Name label="Last name" />
    </Fieldset.Root>
  )
}

function Name(props: { label: string }) {
  return (
    <Field.Root>
      <Field.Label>{props.label}</Field.Label>
      <Input.Group>
        <Input.Control />
      </Input.Group>
    </Field.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Fieldset/Basic.tsx)

### Size

A fieldset has no `size` of its own. Its fields follow the `size` of the controls inside.

```tsx
import { Field, Fieldset, Input, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      {(
        [
          ['small', 'Small inputs'],
          ['medium', 'Medium inputs'],
          ['large', 'Large inputs'],
        ] as const
      ).map(([size, legend]) => (
        <Fieldset.Root key={size}>
          <Fieldset.Legend>{legend}</Fieldset.Legend>
          <Name label="First name" size={size} />
          <Name label="Last name" size={size} />
        </Fieldset.Root>
      ))}
    </div>
  )
}

function Name(props: { label: string } & Pick<Input.Group.Props, 'size'>) {
  return (
    <Field.Root>
      <Field.Label>{props.label}</Field.Label>
      <Input.Group size={props.size}>
        <Input.Control />
      </Input.Group>
    </Field.Root>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '8',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Fieldset/Size.tsx)

### Variant

Set `variant` to `default`, `stacked`, `card`, or `setting`, and every nested `Field.Root` inherits it.

```tsx
import { Field, Fieldset, Input } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Fieldset.Root variant="stacked">
      <Fieldset.Legend>Stacked labels</Fieldset.Legend>
      <Name label="First name" />
      <Name label="Last name" />
    </Fieldset.Root>
  )
}

function Name(props: { label: string }) {
  return (
    <Field.Root>
      <Field.Label>{props.label}</Field.Label>
      <Input.Group>
        <Input.Control />
      </Input.Group>
    </Field.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Fieldset/Variant.tsx)

### Disabled

Set `disabled` to disable every control in the group.

```tsx
import { Field, Fieldset, Input } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Fieldset.Root disabled variant="stacked">
      <Fieldset.Legend>Disabled</Fieldset.Legend>
      <Field.Root>
        <Field.Label>First name</Field.Label>
        <Input.Group>
          <Input.Control />
        </Input.Group>
      </Field.Root>
    </Fieldset.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Fieldset/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Fieldset.