Radial Switch

Class: FxRadialSwitch · Tag: <fx-radial-switch> · Mixins: Animatable

The <fx-radial-switch> component is a circular multi-state selector featuring a center knob and pointer. States are beautifully arranged as colored ring segments around the dial, providing an intuitive, tactile selection interface.

Installation

import '@salsafx/ui';

Interactive preview of a few variants:

Basic Usage

Drive Mode Selector

Pass nested <fx-switch-state> elements to configure segments. Click a wedge or its label to rotate the pointer to that state.

Active: sport

<fx-radial-switch
    active-id="sport"
    size="280"
    is-animated
>
    <fx-switch-state
        value="day"
        label="DAY"
        icon="fa-solid fa-sun"
        background-color="#eab308"
    ></fx-switch-state>
    <fx-switch-state
        value="sport"
        label="SPORT"
        icon="fa-solid fa-bolt"
        background-color="#f97316"
    ></fx-switch-state>
    <fx-switch-state
        value="performance"
        label="PERFORMANCE"
        icon="fa-solid fa-bolt-lightning"
        background-color="#ef4444"
    ></fx-switch-state>
    <fx-switch-state
        value="night"
        label="NIGHT"
        icon="fa-solid fa-moon"
        background-color="#a855f7"
    ></fx-switch-state>
    <fx-switch-state
        value="winter"
        label="WINTER"
        icon="fa-solid fa-snowflake"
        background-color="#3b82f6"
    ></fx-switch-state>
    <fx-switch-state
        value="eco"
        label="ECO"
        icon="fa-solid fa-leaf"
        background-color="#22c55e"
    ></fx-switch-state>
</fx-radial-switch>

Icons Only

Omit the label attribute to show icons alone on each segment. Optionally bump --fx-radial-switch-icon-size for a clearer icon-only dial.

<fx-radial-switch
    active-id="eco"
    size="260"
    is-animated
    style="--fx-radial-switch-icon-size: 1.25rem;"
>
    <fx-switch-state
        value="day"
        icon="fa-solid fa-sun"
        background-color="#eab308"
    ></fx-switch-state>
    <fx-switch-state
        value="sport"
        icon="fa-solid fa-bolt"
        background-color="#f97316"
    ></fx-switch-state>
    <fx-switch-state
        value="performance"
        icon="fa-solid fa-bolt-lightning"
        background-color="#ef4444"
    ></fx-switch-state>
    <fx-switch-state
        value="night"
        icon="fa-solid fa-moon"
        background-color="#a855f7"
    ></fx-switch-state>
    <fx-switch-state
        value="winter"
        icon="fa-solid fa-snowflake"
        background-color="#3b82f6"
    ></fx-switch-state>
    <fx-switch-state
        value="eco"
        icon="fa-solid fa-leaf"
        background-color="#22c55e"
    ></fx-switch-state>
</fx-radial-switch>

API Reference

`<fx-radial-switch>` Properties & Attributes

Property	Attribute	Type	Default	Description
`activeId`	`active-id`	`String`	`""`	ID of the currently selected state.
`size`	`size`	`Number` \| `String`	`280`	Size of the switch diameter.
`trackWidth`	`track-width`	`Number`	`52`	Thickness of the colored ring track.
`foregroundColor`	`foreground-color`	`String`	`"#ffffff"`	Default active text and icon color.
`backgroundColor`	`background-color`	`String`	`"#3b82f6"`	Default active wedge background color.
`isAnimated`	`is-animated`	`Boolean`	`true`	Enables fluid, hardware-accelerated pointer rotation transitions.
`disabled`	`disabled`	`Boolean`	`false`	Disables the control and prevents user interaction.
`states`	—	`Array`	`[]`	Array of state configurations.

`<fx-switch-state>` Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`String`	`""`	Unique state identifier value.
`label`	`label`	`String`	`""`	State text label.
`icon`	`icon`	`String`	`""`	Optional Font Awesome icon class name.
`foregroundColor`	`foreground-color`	`String`	`""`	Active state text and icon color override.
`backgroundColor`	`background-color`	`String`	`""`	Active state wedge background color override.

Slots

Name	Description
(default)	Nested `<fx-switch-state>` elements defining segments.
`knob`	Center dial knob. Defaults to `<fx-knob>`. Pass a custom element with `slot="knob"` to replace it; sync `angle` / `isAnimated` if your knob supports them.
`icon-{id}`	Per-state icon content (also filled automatically from `icon` on `<fx-switch-state>`).

Events

Name	Detail	Description
`change`	`{ id: String, state: Object }`	Emitted when the active segment changes.

CSS Custom Properties

Property	Default	Description
`--fx-radial-switch-size`	`280px`	Host diameter (also set via the `size` attribute).
`--fx-knob`	`#1e293b`	Center knob fill (forwarded to `<fx-knob>`).
`--fx-knob-ring`	`#334155`	Knob stroke.
`--fx-knob-pointer`	`#f8fafc`	Pointer tick color.
`--fx-radial-switch-gap`	`#0f172a`	Gap / separator color between wedges.
`--fx-radial-switch-shadow-opacity`	`0.35`	Opacity of the active segment inset shadow (`0`–`1`).
`--fx-radial-switch-font-size`	`0.62rem`	Segment label size.
`--fx-radial-switch-icon-size`	`0.95rem`	Segment icon size.

`<fx-knob>`

Reusable center knob (default for slot="knob"). Can also be slotted explicitly or used by other components:

<fx-radial-switch active-id="eco" is-animated>
    <fx-knob slot="knob"></fx-knob>
    <fx-switch-state
        value="eco"
        label="ECO"
        background-color="#22c55e"
    ></fx-switch-state>
</fx-radial-switch>

Property	Attribute	Type	Default	Description
`angle`	—	`Number`	`0`	Pointer rotation in degrees (synced by the host).
`isAnimated`	`is-animated`	`Boolean`	`true`	Enables smooth, hardware-accelerated pointer rotation animations.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxRadialSwitch

    FxElement <|-- FxRadialSwitch : Animatable