# Forms Recipe

Use for settings, checkout, onboarding, review flows, and admin workflows.

## Structure

```html
<main class="form-page">
  <hf-card>
    <div data-hf-slot="card-content" class="hf-card-content">
      <hf-page-header
        title="Invite teammate"
        supporting-text="Add a user and choose access"
      ></hf-page-header>

      <hf-field required>
        <span>Email</span>
        <hf-input aria-label="Email" placeholder="name@company.com"></hf-input>
      </hf-field>

      <hf-radio-group
        name="role"
        items='[{"label":"Admin","value":"admin"},{"label":"Viewer","value":"viewer"}]'
      ></hf-radio-group>

      <div class="actions">
        <hf-button>Send invite</hf-button>
        <hf-button appearance="outline">Cancel</hf-button>
      </div>
    </div>
  </hf-card>
</main>
```

## Rules

- Use visible field labels. Do not rely on placeholders alone.
- Use `items` JSON for `hf-radio-group` and `hf-checkbox-group`.
- Use `hf-radio-group` or explicit step buttons instead of native `select`.
- Use `hf-switch label="..." description="..." checked` for simple switch labels and state.
- Keep actions grouped with tokenized spacing.

## Anti-Patterns

- Native form controls when HUMAIN WCs exist.
- Unsupported `label`, `options`, `subtitle`, or React-only switch thumb icon attributes.
- Bare `hf-card` body content without `hf-card-content`.