Gauge
Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard `progressbar` semantics.
Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard `progressbar` semantics.
Examples
Default
Preview unavailable for this example in the static docs build.
Show code
<Gauge label="Storage" value={64} min={0} max={128} currentValueLabel="64 GB" minimumValueLabel="0 GB" maximumValueLabel="128 GB"></Gauge>API
| Prop | Type | Required | Description |
|---|---|---|---|
label | ReactNode | No | The primary label for the gauge. |
value | number | Yes | The current gauge value. |
min | number | No | The lower bound of the gauge range. Default: 0 |
max | number | No | The upper bound of the gauge range. Default: 1 |
currentValueLabel | ReactNode | No | Optional label describing the current value. |
minimumValueLabel | ReactNode | No | Optional label for the minimum edge of the range. |
maximumValueLabel | ReactNode | No | Optional label for the maximum edge of the range. |
Inherits additional props from Omit<IBaseElementComponent<'div'>, 'children'>.
Overview
Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard progressbar semantics.
Notes
- Use
labelto name the gauge for both UI and accessibility. minimumValueLabelandmaximumValueLabelhelp explain the range.
Form
Form is a container for grouping form controls. Form provides a semantic container for form elements and handles form submission.
GeometryReader
GeometryReader is a view that provides geometry information to its children, allowing you to create responsive layouts based on container size. GeometryReader gives you access to the size and position of the container.