Fieldset
Group related form controls under a legend.
1use herogpui::components::field::{Fieldset, FieldGroup, FieldsetLegend, FieldsetActions};Usage
1use herogpui::prelude::{Button, FieldGroup, FieldVariant, Fieldset, FieldsetActions, FieldsetLegend, Size, Surface, TextField};
2use gpui::prelude::*;
3use gpui::px;
4
5Surface::new()
6 .padding(px(24.))
7 .gap(px(16.))
8 .child(
9 Fieldset::new()
10 .child(FieldsetLegend::new("Profile"))
11 .child(
12 FieldGroup::new()
13 .child(
14 TextField::new(self.demo_text("fset-name", "", cx))
15 .label("Name")
16 .placeholder("Ada Lovelace")
17 .variant(FieldVariant::Secondary),
18 )
19 .child(
20 TextField::new(self.demo_text("fset-email", "", cx))
21 .label("Email")
22 .placeholder("ada@example.com")
23 .variant(FieldVariant::Secondary),
24 ),
25 )
26 .child(FieldsetActions::new().child(
27 Button::new("fieldset-save").label("Save").size(Size::Sm),
28 )),
29 )Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
FieldsetFieldsetLegendFieldGroupFieldsetActions
Fieldset is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Fieldset uses.
Styling
| Style | Description |
|---|---|
flex + flex_col + gap(px(24.)) + flex_shrink + flex_grow + flex_basis(px(0.)) + text_color(colors.foreground) | 24px between the legend, group and actions sections; the flex-fill trio is kept so the fieldset grows inside a flex parent like v3's. |
text_size(px(16.)) + line_height(px(24.)) + FontWeight::MEDIUM + colors.foreground | 16px legend over a 24px line box at medium weight. |
flex + flex_col + w_full + gap(px(16.)) | The 16px vertical rhythm of the grouped fields (`--spacing` × 4). |
flex + flex_row + items_center + gap(px(8.)) + pt(px(4.)) | Centered 8px row of action controls, lifted 4px off the group above. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
ParentElement:: | AnyElement | — | Fieldset content: legend, groups, descriptions and actions, composed as ordered children. |
FieldsetLegend:: | text | — | Legend content, usually plain text. Takes the caption text. |
FieldGroup:: | AnyElement | — | Form controls to group inside the fieldset. |
FieldsetActions:: | AnyElement | — | Action buttons or helper text in the trailing row. |
Parts
| Part | Description |
|---|---|
Fieldset | Root group on the `.fieldset` BEM class: `flex flex-col gap-6` with `shrink grow basis-0` (the Safari flexbox fix for a fieldset with a legend inside a flex parent), foreground text. |
FieldsetLegend | `text-base font-medium text-foreground` — 16px medium, not semibold. |
FieldGroup | `w-full space-y-4`: the full-width stack of grouped fields, 16px apart. |
FieldsetActions | `flex items-center gap-2 pt-1`: the trailing row for submit/cancel controls, 8px apart with a 4px top offset. |