Components

Gauge

Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard progressbar semantics.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Gauge } from '@swiftuijs/ui';
export default function Example() {
    return (<Gauge label="Storage" value={64} min={0} max={128} currentValueLabel="64 GB" minimumValueLabel="0 GB" maximumValueLabel="128 GB"></Gauge>);
}

Usage and limitations

  • Use label to name the gauge for both UI and accessibility.
  • minimumValueLabel and maximumValueLabel help explain the range.

API reference

PropTypeRequiredDescription
labelReactNodeNoThe primary label for the gauge.
valuenumberYesThe current gauge value.
minnumberNoThe lower bound of the gauge range. Default: 0
maxnumberNoThe upper bound of the gauge range. Default: 1
currentValueLabelReactNodeNoOptional label describing the current value.
minimumValueLabelReactNodeNoOptional label for the minimum edge of the range.
maximumValueLabelReactNodeNoOptional label for the maximum edge of the range.

Inherits additional props from Omit<IBaseElementComponent<'div'>, 'children'>.

Edit this page on GitHubReport an issue

Form

Group input controls in a native HTML form.

GeometryReader

Read a container’s size and viewport position through a render function.