> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreflux.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Input & Control Components

> Buttons, toggles, sliders, and fields that write back to your broker.

<Frame caption="An operator panel built from the components on this page: buttons, a toggle, a slider, and entry fields">
  <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/other/inputs-overview.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=9507498bcc35f2564a2ced1d606e5b0d" alt="A two-column operator panel with Start and Emergency Stop buttons, an Enable Production toggle, a setpoint slider, and device name and pressure fields" width="1665" height="310" data-path="images/dashboard/other/inputs-overview.png" />
</Frame>

Input components let operators act: start a line, set a speed, type a value. One rule applies to all of them: **input components don't publish by themselves** — the `ON <EVENT> DO` handler does.

<Tip>
  **Like a steering wheel, not a speedometer.** Display widgets read signals; these widgets send them — every interaction ends in a publish back to the broker.
</Tip>

***

One section per control, each with its rendered result, the code, and then the property reference.

## Button

<Tabs>
  <Tab title="Basic">
    A button that publishes a command when clicked:

    <Frame caption="A button that publishes a start command when clicked">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/button.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=cd6b3b083b4e42d4d4d0c42ce1976ef1" alt="A Start Production button on a dashboard" width="815" height="66" data-path="images/dashboard/components/button.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "StartButton" WITH TYPE "button"
        SET LABEL "Start Production"
        ON CLICK DO
            PUBLISH TOPIC "factory/commands/start" WITH 1
    ```
  </Tab>

  <Tab title="Full example">
    A danger-styled emergency stop — the `STYLE` line is the new part:

    <Frame caption="A red danger-styled Emergency Stop button">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/button-danger.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=cf98eec449ec0e9b9bdda516a671b4db" alt="A red danger-styled Emergency Stop button" width="815" height="66" data-path="images/dashboard/components/button-danger.png" />
    </Frame>

    ```lot wrap focus={3} theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "StopButton" WITH TYPE "button"
        SET LABEL "Emergency Stop"
        SET STYLE "danger"
        ON CLICK DO
            PUBLISH TOPIC "factory/commands/stop" WITH 1
    ```
  </Tab>
</Tabs>

| Property   | Type                                     | Default     | Description    |
| ---------- | ---------------------------------------- | ----------- | -------------- |
| `LABEL`    | String                                   | required    | Button text    |
| `STYLE`    | `"primary"` / `"secondary"` / `"danger"` | `"primary"` | Visual style   |
| `DISABLED` | Boolean                                  | `false`     | Disable button |

**Events:** `ON CLICK DO`

## Toggle / Switch

Binary on/off control. `switch` is an alias for `toggle`.

<Tabs>
  <Tab title="Basic">
    The toggle reflects the bound topic live — publish `true` or `false` to it and the switch follows:

    <Frame caption="A labeled toggle reflecting the live state of its bound topic">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/toggle.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=4c0f81d53f5c464097468abe793ed9c2" alt="An Enable Production toggle switched on" width="815" height="50" data-path="images/dashboard/components/toggle.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "EnableSwitch" WITH TYPE "switch"
        SET LABEL "Enable Production"
        BIND STATE TO TOPIC "factory/production/enabled"
    ```
  </Tab>
</Tabs>

| Property | Type   | Description  |
| -------- | ------ | ------------ |
| `LABEL`  | String | Toggle label |

**Bind targets:** `STATE` — **Events:** `ON TOGGLE DO`

<Warning>
  **Write-back is broken in the current HUB build.** `ON TOGGLE DO PUBLISH ... WITH STATE` fires, but the message payload is the literal text `{{STATE}}` instead of the toggle state (`WITH VALUE` behaves the same). Until this is fixed, use the toggle as a live state display and trigger commands from a [button](#button).
</Warning>

## Slider

Range input for numeric values.

<Tabs>
  <Tab title="Basic">
    The slider tracks its bound topic live — the thumb moves as new values arrive:

    <Frame caption="A 0–200 °C setpoint slider tracking the live value of its bound topic">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/slider-basic.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=182df2e5cbb0cbbef6964d442f81ac6c" alt="A temperature setpoint slider set partway along its 0 to 200 degree range" width="815" height="86" data-path="images/dashboard/components/slider-basic.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "SetpointSlider" WITH TYPE "slider"
        SET RANGE FROM 0 TO 200
        SET UNIT "°C"
        BIND VALUE TO TOPIC "control/setpoint"
    ```
  </Tab>
</Tabs>

| Property            | Type    | Description |
| ------------------- | ------- | ----------- |
| `RANGE FROM x TO y` | Numbers | Min / max   |
| `UNIT`              | String  | Unit label  |

**Bind targets:** `VALUE` — **Events:** `ON CHANGE DO`

<Warning>
  **Write-back is broken in the current HUB build.** `ON CHANGE DO PUBLISH ... WITH VALUE` sends the literal text `{{VALUE}}` instead of the slider position, and dragging is overridden by the bound topic. Until this is fixed, use the slider as a live numeric display and set values from a [number field](#number-field).
</Warning>

## Text Field / Input

Free text entry.

<Tabs>
  <Tab title="Basic">
    A labeled field pre-filled from its topic; typing publishes the new value:

    <Frame caption="A labeled text field pre-filled with the current value from its topic">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/text-field.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=c726cca5e1f6c4fce03fdfa93bc56cfb" alt="A Device Name text field showing pump-station-1" width="815" height="58" data-path="images/dashboard/components/text-field.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "NameInput" WITH TYPE "text-field"
        SET LABEL "Device Name"
        SET PLACEHOLDER "Enter name..."
        BIND VALUE TO TOPIC "config/device/name"
        ON CHANGE DO
            PUBLISH TOPIC "config/device/name" WITH VALUE
    ```
  </Tab>
</Tabs>

| Property      | Type   | Description      |
| ------------- | ------ | ---------------- |
| `LABEL`       | String | Field label      |
| `PLACEHOLDER` | String | Placeholder text |

**Bind targets:** `VALUE` — **Events:** `ON CHANGE DO`

## Number Field

Numeric-only entry.

<Tabs>
  <Tab title="Basic">
    Accepts only numbers and publishes the limit on change:

    <Frame caption="A numeric field that accepts only numbers and publishes the limit on change">
      <img src="https://mintcdn.com/coreflux/ry-30sFxFVWzN72U/images/dashboard/components/number-field.png?fit=max&auto=format&n=ry-30sFxFVWzN72U&q=85&s=d1ed70b5baf478df5766d0fc7c7537f3" alt="A numeric input field for a maximum pressure limit" width="815" height="58" data-path="images/dashboard/components/number-field.png" />
    </Frame>

    ```lot wrap theme={"theme":"css-variables","languages":{"custom":["/languages/lot.json"]}}
    ADD COMPONENT "MaxPressure" WITH TYPE "number-field"
        SET LABEL "Max Pressure (bar)"
        SET PLACEHOLDER "0.00"
        BIND VALUE TO TOPIC "config/pressure/max"
        ON CHANGE DO
            PUBLISH TOPIC "config/pressure/max" WITH VALUE
    ```
  </Tab>
</Tabs>

| Property      | Type   | Description      |
| ------------- | ------ | ---------------- |
| `LABEL`       | String | Field label      |
| `PLACEHOLDER` | String | Placeholder text |

**Bind targets:** `VALUE` — **Events:** `ON CHANGE DO`

## Common mistakes

<AccordionGroup>
  <Accordion title="I typed in a field but nothing was published">
    Text and number fields fire `ON CHANGE` when the value is **committed** — press Enter (or leave the field) after typing. Each keystroke alone does not publish.
  </Accordion>

  <Accordion title="The toggle flips back on its own">
    The toggle reflects its `BIND STATE` topic. If nothing updates that topic, the toggle snaps back to the last bound value — make sure something (device, Action, or a test publish) updates the bound state.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Actions & events" icon="bolt" href="/latest/lot-language/panels/actions-events">
    Everything a control can do: publish, navigate, invoke, trigger, and branch.
  </Card>

  <Card title="Container components" icon="table-cells-large" href="/hub/dashboards/components/containers">
    Group controls and readouts into cards and tabs.
  </Card>
</CardGroup>