Labeled Value
A labeled value displays a non-editable value with a label.
Example
Value
A labeled value accepts numbers, strings, and lists of strings in the value prop.
Numbers
When passing a number into a labeled value, the format_options prop dictates how the value is displayed. There are 3 styles supported by this parameter: Percentage, Currency, and Units.
Note that this prop is compatible with the option parameter of Intl.NumberFormat.
Label position
By default, the label is positioned above the labeled value, but it can be moved to the side using the label_position prop.
Contextual Help
Using the contextual_help prop, a ui.contextual_help can be placed next to the labeled value to provide additional information.
API reference
Labeled values displays non-editable values with a corresponding label
Returns: Element The rendered labeled value element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| value | str | List[str] | int | None | None | The value to be displayed. |
| label | Element | None | None | The content of the label. |
| format_options | NumberFormatOptions | None | None | Formatting options for the value displayed in the number field. |
| label_position | Literal['top', 'side'] | None | 'top' | The label's overall position relative to the element it is labeling. |
| label_align | Literal['start', 'end'] | None | None | The label's horizontal alignment relative to the element it is labeling. |
| contextual_help | Any | None | None | A contextual help element to place next to the label. |