Inputs

SettingItem

A settings row with a label, a description and one control on the right.

<script>
  import { SettingItem, Switch } from "@codeatlasdev/ui";

  let email = $state(true);
</script>

<SettingItem label="Email notifications" description="Receive an email for every mention.">
  <Switch bind:checked={email} />
</SettingItem>

The row is a <label>, so clicking the text activates the first control inside it (a Switch, an input, a select or a button) and names it for assistive technology. Use it inside AppSettings tabs.

<script lang="ts">
  import { SettingItem, Switch } from '@codeatlasdev/ui';

  let email = $state(true);
  let digest = $state(false);
</script>

<SettingItem label="Email notifications" description="Receive an email for every mention.">
  <Switch bind:checked={email} />
</SettingItem>
<SettingItem label="Weekly digest" description="One summary every Monday.">
  <Switch bind:checked={digest} />
</SettingItem>