components choice

components/choice

Import: import { Choice, Checkbox, Radio, ChoiceGroup } from "@tundralibs/ui/choice"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Choice

Choice(props: ChoiceProps): Html

Checkbox

Checkbox(props: Omit): Html

Radio

Radio(props: Omit): Html

ChoiceGroup

ChoiceGroup(props: ChoiceGroupProps): Html

Types

ChoiceType

• "checkbox"
• "radio"

ChoiceProps

Prop	Type	Required	Description
type	ChoiceType	yes
id	string
name	string
value	string
checked	boolean
disabled	boolean
label	`string	Html`
attrs	Attrs

ChoiceGroupProps

Prop	Type	Required	Description
items	Html[]	yes
inline	boolean
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Checkboxes in a row

ChoiceGroup({
  inline: true,
  items: [
    Checkbox({ name: "notify", value: "email", label: "Email", checked: true }),
    Checkbox({ name: "notify", value: "sms", label: "SMS" }),
  ],
})

<div class="choice-group choice-group--inline">
  <label class="choice">
    <input type="checkbox" class="choice__input" name="notify" value="email" checked="">
    <span class="choice__label">Email</span>
  </label>
  <label class="choice">
    <input type="checkbox" class="choice__input" name="notify" value="sms">
    <span class="choice__label">SMS</span>
  </label>
</div>

A radio set

ChoiceGroup({
  items: [
    Radio({ name: "plan", value: "monthly", label: "Monthly", checked: true }),
    Radio({ name: "plan", value: "yearly", label: "Yearly — two months free" }),
  ],
})

<div class="choice-group">
  <label class="choice">
    <input type="radio" class="choice__input" name="plan" value="monthly" checked="">
    <span class="choice__label">Monthly</span>
  </label>
  <label class="choice">
    <input type="radio" class="choice__input" name="plan" value="yearly">
    <span class="choice__label">Yearly — two months free</span>
  </label>
</div>

CSS hooks

Classes defined by components/choice/choice.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.choice, .choice-group, .choice-group--inline, .choice__input, .choice__label