form fields

<tc-select>

Dropdown built on the native `<select>` — pass options as a JSON array, get form submission and validity for free.

import "@ra9/tan-compose-kit/select"

Props

Name	Type	Default	Description
`value`	`string`	`""`	Currently-selected option value.
`name`	`string`	`""`	Field name for form submission.
`options`	`Array<{ value: string; label: string; disabled?: boolean }>`	`[]`	Options to render. Pass as a JSON attribute or as a JS property.
`placeholder`	`string`	`""`	When set, prepends a disabled empty option that acts as a prompt.
`label`	`string`	`""`	Label rendered above the select.
`helper`	`string`	`""`	Small helper text below the select.
`error`	`string`	`""`	Error message; paints invalid when set.
`disabled`	`boolean`	`false`	Disables the select; reflects to the host.
`required`	`boolean`	`false`	Required for form validation; reflects to the host.

Events

Event	Detail	When
`tc-change`	`{ value: string }`	Fires when the user picks a new option.

CSS variables

Variable	Default	Description
`--tc-input-bg`	`var(--tc-color-surface, #ffffff)`	Background.
`--tc-input-fg`	`var(--tc-color-ink, #14171f)`	Foreground color.
`--tc-input-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Resting border color.
`--tc-input-border-focus`	`var(--tc-color-accent, #a16939)`	Border color when focused.
`--tc-input-error`	`var(--tc-color-danger, #b3261e)`	Border + text color in the error state.
`--tc-input-helper`	`var(--tc-color-ink-muted, #6b7280)`	Color of the helper text.
`--tc-input-radius`	`var(--tc-radius-md, 8px)`	Corner radius.
`--tc-input-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Basic usage

Pass options as a JSON array of { value, label }.

<tc-select label="Country" placeholder="Select one…" options='[ {"value":"lr","label":"Liberia"}, {"value":"gh","label":"Ghana"}, {"value":"ng","label":"Nigeria"} ]' ></tc-select>

Setting options from JS

For dynamic option lists, set options as a property:

<tc-select id="country" label="Country" placeholder="Pick one…"></tc-select> <script type="module"> const el = document.getElementById("country"); el.options = await fetchCountries(); // returns [{ value, label }, …] </script>

Preselected value

Match value to one of the option values to preselect.

<tc-select label="Plan" value="pro" options='[…]'></tc-select>

Disabled options

Mark individual options unselectable with disabled: true.

<tc-select label="Region" options='[ {"value":"na","label":"North America"}, {"value":"eu","label":"Europe"}, {"value":"ap","label":"Asia Pacific","disabled":true} ]' ></tc-select>

Error state

Theming

Shares the --tc-input-* family with the other form fields. The dropdown caret is positioned by the component; only the border/background tokens are themable.

Accessibility

Renders a real <select> — full native keyboard navigation (arrows, type-ahead) works.
aria-invalid reflects the error state; required is forwarded.
The label is associated via real <label> markup.
The caret indicator is aria-hidden — the native select already announces "combobox" or "listbox" to screen readers.

← All components