Labeled Value
A labeled value displays a non-editable value with a label.
Example
from deephaven import ui
my_labeled_value_basic = ui.labeled_value(label="File name", value="Budget.xls")
Value
A labeled value accepts numbers, strings, and lists of strings in the value prop.
from deephaven import ui
@ui.component
def ui_labeled_value_examples():
return [
ui.labeled_value(label="File name", value="Budget.xls"),
ui.labeled_value(label="Number of expenses in Budget file", value=123),
ui.labeled_value(
label="Pizza toppings", value=["Pizza", "Pineapple", "Mushroom", "Garlic"]
),
]
my_labeled_value_values_examples = ui_labeled_value_examples()
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.
from deephaven import ui
@ui.component
def ui_labeled_value_numbers_example():
return [
ui.labeled_value(
label="Percent completed",
value=0.89,
format_options={"style": "percent"},
),
ui.labeled_value(
label="Withdrawal amount",
value=2350.50,
format_options={"style": "currency", "currency": "USD"},
),
ui.labeled_value(
label="Height of Burj Khalifa",
value=32600,
format_options={"style": "unit", "unit": "inch"},
),
]
my_labeled_value_numbers_example = ui_labeled_value_numbers_example()
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.
from deephaven import ui
my_labeled_value_label_position_example = ui.labeled_value(
label="File name", value="Onboarding.pdf", label_position="side", label_align="end"
)
Contextual Help
Using the contextual_help prop, a ui.contextual_help can be placed next to the labeled value to provide additional information.
from deephaven import ui
my_labeled_value_contextual_help_example = ui.labeled_value(
label="File name",
value="Onboarding.pdf",
contextual_help=ui.contextual_help(
heading="Info about the onboarding document", content="Sample content"
),
)
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. |