# Thermostat

A home-climate section with a glazed ceramic dial. It clicks at every degree, draws the work left as an arc from the room to the set point, and turns itself when you pick a time of day.

Block · With a Pass · https://tactileui.dev/blocks/thermostat

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Detent dial setpoint, Setpoint arc, Deadband rule, Schedule presets, Container queries

## Usage notes

A product or app section for anything with one physical setting and a daily rhythm: heating, an oven, a light. The Detent Dial is the device on a wall plate; around it a large readout, a status sentence that says what will happen and how long it takes, a Heat / Cool / Auto switch and a schedule whose buttons move the dial.

## Options

| Option | Type | Description |
| - | - | - |
| headline | text | Text after the first comma is set in italic. |
| eyebrow | text | Eyebrow |
| lede | text | Lede |
| cta | text | Button |
| price | text | Price |
| room | text | Room |
| mode | enum | Mode |
| setpoint | number | Where the knob starts. It clicks at each whole degree and lands on halves. |
| current | number | The arc runs from here to the set point. |
| humidity | number | Humidity (%) |
| time | text | HH:MM. Marks the day bar and picks the current period. |
| palette | enum | Palette |
| finish | enum | Knob finish |
| light | number | Light from (degrees) |

## Methods

- target
- update
- destroy

## States

1. **Heating**: Set point above the room: a terracotta arc from the room's temperature to the set point, a warm light across the section, 'Heating to … · about … min'.
2. **Cooling**: Below the room in cool or auto: the arc and light turn slate.
3. **Holding**: Within the deadband: no arc, only the room's dot; sage accents; 'Holding …'.
4. **Turning**: The readout and arc follow every value; the status line is rewritten once, on release, for assistive technology.
5. **Schedule press**: 
6. **Mode change**: Native radios; the rule, arc colour, status and ambient light change together.
7. **Palettes**: Linen, stone or clay, with any dial finish and lamp angle.
8. **Reduced motion**: Every transition is removed and the dial lands without its settle; all readings stay.
9. **Tablet**: 
10. **Phone**: Dial, readout and status centred.

## How it works

Original. Tove is fictional.