LED Indicator

Class: FxLedIndicator · Tag: <fx-led-indicator> · Mixins: Animatable

The <fx-led-indicator> component renders a physical LED status light. It is designed for use in HMI status panels, channel monitoring boards, and any application requiring clear binary state visualization. Supports smooth color transitions, configurable shapes, and an optional blink mode for alarms.

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Toggle

Alarm Blink

Large

Radio

Basic Usage

Toggle checklist

Click any LED to toggle it independently — useful for multi-select checklists and channel arming.

<fx-led-indicator
    label="Power"
    color="#22d3ee"
    is-active
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    label="Pump"
    color="#818cf8"
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    label="Valve"
    color="#e879f9"
    is-interactive
></fx-led-indicator>

Radio selection

Share the same name to make the LEDs behave like radio buttons — only one can be active at a time.

<fx-led-indicator
    name="bus"
    label="Main Bus"
    color="#22d3ee"
    shape="rect"
    is-active
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    name="bus"
    label="Aux Bus"
    color="#818cf8"
    shape="rect"
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    name="bus"
    label="Fault"
    color="#ff5c8a"
    shape="rect"
    is-interactive
></fx-led-indicator>

Alarm with blink

<fx-led-indicator
    label="Overheat"
    color="#ff5c8a"
    is-active
    is-blinking
></fx-led-indicator>

Size variants

Built-in sizes via the size attribute: small, medium (default), large, and x-large.

<fx-led-indicator
    label="Small"
    color="#22d3ee"
    is-active
    size="small"
></fx-led-indicator>

<fx-led-indicator
    label="Medium"
    color="#818cf8"
    is-active
    size="medium"
></fx-led-indicator>

<fx-led-indicator
    label="Large"
    color="#e879f9"
    is-active
    size="large"
></fx-led-indicator>

<fx-led-indicator
    label="X-Large"
    color="#4ade80"
    is-active
    size="x-large"
></fx-led-indicator>

Shapes

All geometry profiles: round (default), square, and rect.

<fx-led-indicator
    label="Round"
    shape="round"
    color="#22d3ee"
    is-active
></fx-led-indicator>

<fx-led-indicator
    label="Square"
    shape="square"
    color="#818cf8"
    is-active
></fx-led-indicator>

<fx-led-indicator
    label="Rect"
    shape="rect"
    color="#e879f9"
    is-active
></fx-led-indicator>

Disable animation

Boolean attributes follow the HTML standard — presence means true, absence means false. Properties that default to true (like isAnimated) must be disabled via a JavaScript property assignment:

<fx-led-indicator
    id="static-led"
    label="Static"
    color="#22d3ee"
    is-active
></fx-led-indicator>

document.getElementById('static-led').isAnimated = false;

In Lit templates use the ? boolean attribute binding:

html`<fx-led-indicator ?is-animated="${animate}" is-active></fx-led-indicator>`

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
`label`	`label`	`String`	`""`	Text label displayed near the LED.
`labelPosition`	`label-position`	`String`	`"top"`	Label placement (“top”, “bottom”, or “none”).
`shape`	`shape`	`String`	`"round"`	LED shape (“round”, “square”, or “rect”).
`size`	`size`	`String`	`"medium"`	LED size (“small”, “medium”, “large”, or “x-large”).
`color`	`color`	`String`	`"#22c55e"`	Active LED color.
`name`	`name`	`String`	`""`	Radio group name to link multiple LEDs together.
`isActive`	`is-active`	`Boolean`	`false`	Whether the LED is currently active.
`isBlinking`	`is-blinking`	`Boolean`	`false`	Enables blinking when the LED is active.
`isAnimated`	`is-animated`	`Boolean`	`true`	Enables fluid, hardware-accelerated color transitions on state changes.
`isInteractive`	`is-interactive`	`Boolean`	`false`	Allows the user to toggle the active state.
`disabled`	`disabled`	`Boolean`	`false`	Disables interaction and dims the control.

CSS Custom Properties

Property	Default	Description
`--fx-led-size`	`18px`	Diameter of the LED (rect width is `2.6×` this size). Overridable for custom sizes beyond the `size` attribute.
`--fx-font-family`	`system-ui`	Font used for the label.

Events

Event	Detail	Description
`change`	`{ isActive: boolean, name: string }`	Fired on every click. `isActive` reflects the new state. `name` is the radio group name if set.

Keyboard

The LED bezel is focusable (tabindex="0") and responds to Space and Enter the same way as a click.

Radio group example

Clicking any LED in the group activates it and automatically deactivates the others. Without name, each LED toggles independently. Note the is-interactive attribute — without it, LEDs are read-only status indicators and ignore clicks.

<fx-led-indicator
    name="mode"
    label="Auto"
    color="#22d3ee"
    is-active
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    name="mode"
    label="Manual"
    color="#818cf8"
    is-interactive
></fx-led-indicator>

<fx-led-indicator
    name="mode"
    label="Off"
    color="#e879f9"
    is-interactive
></fx-led-indicator>

Slots

This component has no slots.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxLedIndicator

    FxElement <|-- FxLedIndicator : Animatable