---
title: Inputs
description: Inputs, selects, checkboxes, switches and setting rows, with their native controls kept in light DOM.
---

These render their native control in light DOM, so password managers, `<label for>` and forms work as they do on any page.

## Input

<Demo id="input" layout="stack">
  <gw-input label="Host" name="host" placeholder="192.168.1.20" hint="The address System Bridge listens on"></gw-input>
  <gw-input label="Port" name="port" type="number" value="9170" error="Port 9170 is already in use"></gw-input>
  <gw-input label="Token" name="token" type="password" autocomplete="current-password"></gw-input>
</Demo>

| Attribute | Values |
| --- | --- |
| `label` | The visible label, linked to the input |
| `type`, `name`, `value`, `placeholder`, `autocomplete` | Passed to the `<input>` |
| `hint` | Help text under it, linked with `aria-describedby` |
| `error` | An error under it; marks the input invalid |
| `required`, `disabled` | Passed to the `<input>` |

## Select

<Demo id="select" layout="stack">
  <gw-select label="Theme" name="theme" value="glazing">
    <option value="base">Base</option>
    <option value="glazing">Glazing</option>
    <option value="survey">Survey</option>
  </gw-select>
</Demo>

Write `<option>` children, or set `options` to `[{ "value", "label" }]`. It fires the native `change`.

## Checkbox and switch

<Demo id="checkbox">
  <gw-checkbox label="Include hidden files" name="hidden"></gw-checkbox>
  <gw-switch label="Wake on LAN" name="wol" checked></gw-switch>
  <gw-switch label="Unavailable" disabled></gw-switch>
</Demo>

`gw-switch` is the same native checkbox drawn as a switch, with `role="switch"` so it's announced as one. Both take `label`, `name`, `value`, `checked`, `disabled` and `hint`. `label-hidden` keeps the label for assistive technology but hides it, for a control whose name is already beside it, as in a setting row.

## Setting row

<Demo id="setting-row" layout="stack">
  <div>
    <gw-setting-row heading="Start on login" description="Run System Bridge when you sign in">
      <gw-switch label="Start on login" label-hidden checked></gw-switch>
    </gw-setting-row>
    <gw-setting-row heading="Theme" description="How the web UI looks">
      <gw-segmented label="Theme mode" value="dark" options='[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]'></gw-segmented>
    </gw-setting-row>
  </div>
</Demo>

A setting's name and description on one side and its control on the other. A wide control drops under the text when there isn't room, and rows after the first get a line above them.