Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/fieldset.md
# fieldset (headless)
An unstyled group of related form controls: a native `<fieldset>` with an optional `<legend>`. No formal WAI-ARIA APG pattern applies — the native `fieldset`/`legend` elements supply the grouping semantics and accessible name.
## Generate
```bash
mix mishka.ui.gen.headless fieldset
```
Generates `lib/<app>_web/components/headless/fieldset.ex`. No JS engine to wire up — this component ships no scripts and no hooks.
## Anatomy
Root is a native `<fieldset>` carrying `class="chelekom-fieldset"`. The single part is the `<legend>`, marked with a `data-part` hook (purely a styling/query anchor — no engine consumes it):
| Part | Element | `data-part` | Class | Source |
|------|---------|-------------|-------|--------|
| root | `fieldset` | — | `chelekom-fieldset` | always rendered |
| legend | `legend` | `legend` | `chelekom-fieldset__legend` | `<:legend>` slot (rendered only when provided) |
| fields | — | — | — | `inner_block` (required, the grouped controls) |
## ARIA & keyboard
No explicit ARIA wiring and no JS. `aria_pattern` is "Fieldset (no formal APG pattern)" with an empty keyboard list.
- Native `<fieldset>` exposes a `group` role and groups its descendant form controls.
- Native `<legend>` provides the group's accessible name; rendered only when `<:legend>` is present.
- Keyboard behavior is the browser's native tab order — nothing added or trapped.
## State
No state attributes. `.exs` declares `state_attributes: []` and `hooks: []`; the template adds no `data-open`/`data-closed`-style presence attributes. **No JS** — nothing to toggle.
## Example
```heex
<.fieldset id="billing">
<:legend>Billing address</:legend>
<label for="street">Street</label>
<input id="street" name="street" type="text" />
<label for="city">City</label>
<input id="city" name="city" type="text" />
</.fieldset>
```
Attrs: `id` (default `nil`), `class` (extra classes for root), `rest` (global). Slots: `legend` (optional group label, rendered as `<legend>`) and `inner_block` (required, the grouped form controls). Omit `<:legend>` to render a fieldset with no legend.
## Styling
Ships **no** colors or spacing — structural markup only. Style via classes/part hook:
```css
.chelekom-fieldset { /* border / padding */ }
.chelekom-fieldset__legend { /* label typography */ }
[data-part="legend"] { /* or target the part directly */ }
```
Add custom classes to the root via `class`. No state `data-*` attributes to style against.