Swatch

A round colour dot that is a native radio, named by its tone, for choosing a colour inside a radio group.

Choose a color

Three tones show selection without overflowing the compact card.

Color

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-radio-group/ui-radio-group.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-swatch/ui-swatch.html"
>

<ui-radio-group
  label="Color"
  value="blue"
>
  <ui-swatch
    tone="blue"
  ></ui-swatch>
  <ui-swatch
    tone="green"
  ></ui-swatch>
  <ui-swatch
    tone="purple"
  ></ui-swatch>
</ui-radio-group>

<script setup>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<template>
  <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>
</template>

import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>;
}

/** @jsxImportSource preact */
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>;
}

<script>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<UiRadioGroup
  label="Color"
  value="blue"
>
  <UiSwatch
    tone="blue"
  />
  <UiSwatch
    tone="green"
  />
  <UiSwatch
    tone="purple"
  />
</UiRadioGroup>

import { Component } from "@angular/core";
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiRadioGroup, UiSwatch],
  template: `
    <fieldset
      ui-radio-group
      [label]="'Color'"
      [value]="'blue'"
    >
      <input
        ui-swatch
        [tone]="'blue'"
      >
      <input
        ui-swatch
        [tone]="'green'"
      >
      <input
        ui-swatch
        [tone]="'purple'"
      >
    </fieldset>
  `,
})
export default class Example {}

Tones

Six tones in a radio group; the group's value checks one, and the arrow keys move between them.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-radio-group/ui-radio-group.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-swatch/ui-swatch.html"
>

<ui-radio-group
  label="Color"
  value="blue"
>
  <ui-swatch
    tone="neutral"
  ></ui-swatch>
  <ui-swatch
    tone="blue"
  ></ui-swatch>
  <ui-swatch
    tone="green"
  ></ui-swatch>
  <ui-swatch
    tone="yellow"
  ></ui-swatch>
  <ui-swatch
    tone="red"
  ></ui-swatch>
  <ui-swatch
    tone="purple"
  ></ui-swatch>
</ui-radio-group>

<script setup>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<template>
  <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="neutral"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="red"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>
</template>

import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="neutral"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="red"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>;
}

/** @jsxImportSource preact */
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Color"
    value="blue"
  >
    <UiSwatch
      tone="neutral"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="red"
    />
    <UiSwatch
      tone="purple"
    />
  </UiRadioGroup>;
}

<script>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<UiRadioGroup
  label="Color"
  value="blue"
>
  <UiSwatch
    tone="neutral"
  />
  <UiSwatch
    tone="blue"
  />
  <UiSwatch
    tone="green"
  />
  <UiSwatch
    tone="yellow"
  />
  <UiSwatch
    tone="red"
  />
  <UiSwatch
    tone="purple"
  />
</UiRadioGroup>

import { Component } from "@angular/core";
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiRadioGroup, UiSwatch],
  template: `
    <fieldset
      ui-radio-group
      [label]="'Color'"
      [value]="'blue'"
    >
      <input
        ui-swatch
        [tone]="'neutral'"
      >
      <input
        ui-swatch
        [tone]="'blue'"
      >
      <input
        ui-swatch
        [tone]="'green'"
      >
      <input
        ui-swatch
        [tone]="'yellow'"
      >
      <input
        ui-swatch
        [tone]="'red'"
      >
      <input
        ui-swatch
        [tone]="'purple'"
      >
    </fieldset>
  `,
})
export default class Example {}

None chosen

A radio group without a value leaves every swatch unchecked until one is chosen; Tab reaches the first swatch.

Highlight

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-radio-group/ui-radio-group.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-swatch/ui-swatch.html"
>

<ui-radio-group
  label="Highlight"
>
  <ui-swatch
    tone="yellow"
  ></ui-swatch>
  <ui-swatch
    tone="green"
  ></ui-swatch>
  <ui-swatch
    tone="blue"
  ></ui-swatch>
  <ui-swatch
    tone="red"
  ></ui-swatch>
</ui-radio-group>

<script setup>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<template>
  <UiRadioGroup
    label="Highlight"
  >
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="red"
    />
  </UiRadioGroup>
</template>

import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Highlight"
  >
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="red"
    />
  </UiRadioGroup>;
}

/** @jsxImportSource preact */
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

export default function Example() {
  return <UiRadioGroup
    label="Highlight"
  >
    <UiSwatch
      tone="yellow"
    />
    <UiSwatch
      tone="green"
    />
    <UiSwatch
      tone="blue"
    />
    <UiSwatch
      tone="red"
    />
  </UiRadioGroup>;
}

<script>
  import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";
</script>

<UiRadioGroup
  label="Highlight"
>
  <UiSwatch
    tone="yellow"
  />
  <UiSwatch
    tone="green"
  />
  <UiSwatch
    tone="blue"
  />
  <UiSwatch
    tone="red"
  />
</UiRadioGroup>

import { Component } from "@angular/core";
import { UiRadioGroup, UiSwatch } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiRadioGroup, UiSwatch],
  template: `
    <fieldset
      ui-radio-group
      [label]="'Highlight'"
    >
      <input
        ui-swatch
        [tone]="'yellow'"
      >
      <input
        ui-swatch
        [tone]="'green'"
      >
      <input
        ui-swatch
        [tone]="'blue'"
      >
      <input
        ui-swatch
        [tone]="'red'"
      >
    </fieldset>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: input

Attributes

Name	Description	Property	Type	Default	Allowed values
`tone`	The swatch's colour, on the same tokens as editor chips. It is also the radio's value and, by name, its label.	`tone`	`keyword`	`neutral`	`neutral, blue, green, yellow, red, purple`

Framework props

Name	Type	Default	Allowed values
`tone`	`"neutral" \| "blue" \| "green" \| "yellow" \| "red" \| "purple"`	`neutral`	`neutral, blue, green, yellow, red, purple`

Events

No events.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

Token	Declared values	Fallback
`--ui-swatch-size`	`—`	`1.65rem`

Shared tokens

Token	Fallback
`--ui-accent-soft`	`—`
`--ui-accent-solid`	`—`
`--ui-accent-subtle-text`	`—`
`--ui-border-width`	`—`
`--ui-danger-soft`	`—`
`--ui-danger-subtle-text`	`—`
`--ui-focus-ring`	`var(--ui-accent-solid)`
`--ui-focus-width`	`—`
`--ui-info-soft`	`—`
`--ui-info-subtle-text`	`—`
`--ui-success-soft`	`—`
`--ui-success-subtle-text`	`—`
`--ui-surface-subtle`	`—`
`--ui-text-secondary`	`—`
`--ui-warning-soft`	`—`
`--ui-warning-subtle-text`	`—`