Label & Messages
The label, description and error slots every field composes.
1use herogpui::components::field::{Description, ErrorMessage, FieldError, Label};Usage
1use herogpui::prelude::{Description, ErrorMessage, FieldError, Label};
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .flex()
7 .flex_col()
8 .items_start()
9 .gap(px(12.))
10 .children(vec![
11 Label::new("Email").into_any_element(),
12 Description::new("We will never share your address.").into_any_element(),
13 ErrorMessage::new("Enter a valid email address.").into_any_element(),
14 ])Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
LabelDescriptionErrorMessageFieldError
Label & Messages is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Label & Messages uses.
Styling
| Style | Description |
|---|---|
flex + items_center + gap(px(2.)) + text_size(px(14.)) + line_height(px(20.)) + FontWeight::MEDIUM + colors.foreground | 14px medium label; the port's 2px flex gap exists to carry the required asterisk, which draws with `after:ms-0.5 after:text-danger`. |
text_size(px(12.)) + line_height(px(16.)) + colors.muted | 12px muted helper copy at the `text-xs` leading (16px); the wrap-break-word utilities are not portable. |
text_size(px(12.)) + line_height(px(16.)) + colors.danger.color | 12px danger text; paints it directly without the collapsible height/opacity interpolation. |
px(px(4.)) around ErrorMessage::new(text), rendered only when invalid | The 4px horizontal padding is the only spacing `.field-error` adds over `.error-message`; the animated collapse is replaced by rendering nothing until the field is invalid with a message. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
label_for( | id, | — | The id of the element the label is associated with. GPUI has no element id graph, so the association is the field's focus handle — the one visible effect, clicking the label focusing the field — instead of an id reference. |
is_required( | bool | false | Whether to display a required indicator: the danger-coloured asterisk after the text. |
is_disabled( | bool | false | Whether the label is in a disabled state (the status-disabled dimming). |
is_invalid( | bool | false | Whether the label is in an invalid state (`text-danger`). |
Label:: | text | — | The content of the label. Takes the text. |
Description:: | text | — | The content of the description. Takes the text. |
ErrorMessage:: | text | — | The error message content. Always rendered when present; takes the text. |
FieldError:: | ). | — | Error message content or a render function of the validation result. The render-function form is not portable — the port's `FieldError` takes the message and manages visibility from the field's validation state, rendering nothing unless the field is invalid and a message is present. |
Parts
| Part | Description |
|---|---|
Label | `text-sm font-medium text-foreground` label on the `.label` BEM class; lays it out as a 2px flex row so the required asterisk can follow the text. |
Description | `text-xs text-wrap wrap-break-word text-muted` helper copy (`slot="description"`). The soft-wrapping utilities have no GPUI analogue. |
ErrorMessage | `text-xs wrap-break-word text-danger` on the `.error-message` BEM class, with opacity/height transitions that does not animate. |
FieldError | `.field-error` adds `px-1` and the collapsible `h-0 opacity-0 data-visible:h-auto` behaviour to the error text. Keeps the 4px horizontal padding around the message but gates visibility from the validation state instead of animating a collapse. |
States
| Builder | State | Description |
|---|---|---|
is_required + danger-coloured "*" child | Required | Appends the danger-coloured asterisk after the label text. |
is_disabled + disabled_opacity | Disabled | Status-disabled dimming of the label text. |
is_invalid + colors.danger.color | Invalid | Repaints the label text in the danger colour. |