Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Show a label/value pair on one line — "Version … 2.6.0", "Wi-Fi … Liquid-5G" — without inventing a bespoke flex-row per screen.
import { LabeledContent } from "@liquidify/react/labeled-content"| Prop | Type | Default | Description |
|---|---|---|---|
| align | LabeledContentAlign | undefined | baseline | Cross-axis alignment of the label against the trailing slot. Leave `"baseline"` (the default) for a text "key: value" row; pass `"center"` to seat a control (Toggle/Slider/Picker) — taller than one text line — against its label, the settings-row posture absorbed from the removed `Form.Body.Row`. |
| children | ReactNode | — | The trailing value, as rich/formatted content (SwiftUI `@ViewBuilder content:`) — a styled `Text`, a formatted date, or any other node. A bare `string | number` child is wrapped `color="secondary"` (overridable via {@link LabeledContentProps.valueProps}) via `TextLabel`, same as {@link LabeledContentProps.value}; any other `ReactNode` passes through unchanged and ignores `valueProps`. Mutually exclusive with `value` (see `value` for the both-supplied dev-warning contract). children role: `content` (charter §8) — the free-form value slot. |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| label required | ReactNode | — | The leading descriptor (SwiftUI `titleKey:` / `label:`) — the accessible name source. A `string | number` renders through the `TextLabel` guard into an internal `Text` (default `color="primary"`, overridable via {@link LabeledContentProps.labelProps}); any other `ReactNode` (e.g. an icon+text composite) passes through unwrapped — `labelProps` is ignored — so the caller keeps ownership of its own typography and icon. |
| labelProps | LabelProps | undefined | — | Per-instance typography override for the leading label — the web-only seam for SwiftUI's `.font(_:)` / `.foregroundStyle(_:)` on the label (ADR-0028). Spread **last** into the label `TextLabel`, so an explicit value here wins over the component's `color="primary"` default. Applies only when {@link LabeledContentProps.label} is a `string | number`; a composite `ReactNode` label ignores this prop entirely. |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| value | string | undefined | — | The trailing value, as a plain string (SwiftUI `init(_:value:)`). Routed through `TextLabel` (default `color="secondary"`, overridable via {@link LabeledContentProps.valueProps}). Mutually exclusive with {@link LabeledContentProps.children} — supply exactly one per instance; when both are supplied, `value` wins (the `value !== undefined` gate is retained, so a legitimate empty-string `value` still wins), and a dev build additionally fires a `console.error` (charter §8; audit §7 P2). |
| valueProps | LabelProps | undefined | — | Per-instance typography override for the trailing value — the web-only seam for SwiftUI's `.font(_:)` / `.foregroundStyle(_:)` on the value content (ADR-0028). Spread **last** into the value `TextLabel`, so an explicit value here wins over the component's `color="secondary"` default. Applies only to a `string | number` {@link LabeledContentProps.value} or a bare `string | number` {@link LabeledContentProps.children}; a `ReactNode` child ignores this prop entirely. |
Labeled Content preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-color-label-primary | Component-defined value |
| --lq-color-label-secondary | Component-defined value |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-labeled-content-gap | var(--lq-space-16) |
| --lq-labeled-content-hpad | Component-defined value |
| --lq-labeled-content-pad | Component-defined value |
| --lq-labeled-content-thumb-h | Component-defined value |
| --lq-labeled-content-track-h | Component-defined value |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |