# Model picker

Choose a model. A well shows the one in use, and a card of rows opens from it; each row has the model’s name, a line about it, a legend for speed and one for cost (each a small ladder of three and a word), its context size, and a lamp lit on the one in use. It is a listbox with type-ahead, built on a native select that stays the form’s value. The names here are made up.

Kit part · With the Kit · https://tactileui.dev/parts/model-picker

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The combobox’s well and card, the listbox’s rows and keys, and the ladder’s three segments as a legend. The only colour is the green lamp on the model in use.

## Variants

- The default · a well that opens a card
- Open on the page · inline
- The cheapest chosen
- Disabled

## States

- Rest
- Focus
- Open
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| option[data-speed][data-cost][data-context][data-hint] | attribute | A model’s legends. Speed 3 is Fast, 2 Balanced, 1 Thorough; cost 3 is High, 2 Medium, 1 Low. data-context is its size as you want it printed (“128k”); data-hint is the line under its name. |
| option[disabled] | attribute | A model that cannot be chosen. It stays in the list, dimmed, with its reason in its line. |
| inline | attribute | Leave the list open on the page, as a listbox, instead of in a card. |
| label | attribute | The list’s accessible name when no points at the select. Default “Model”. |
| value | property | The chosen model’s value. Set it to change the choice from code. |
| modelLegend() · modelSays() · modelRows() | function |  |

## Usage notes

Press the well, or focus it and press Enter, Space or the Down arrow. Use the arrow keys, or type the first letters of a name to jump to it, and press Enter to choose. Escape closes it without choosing. A greyed row is passed over and says why.

## Accessibility

- It is the WAI-ARIA select-only combobox over a listbox. Enter, Space, Down or Alt+Down open it; Up, Down, Home and End move; typing finds the next model whose name starts with it; Enter chooses; Escape and Tab close it without choosing.
- Every legend is a word. Speed and cost each show a ladder of three segments lit as far as the level goes, but the ladder is drawn for the eye and hidden from a screen reader, which hears “Balanced speed, medium cost, 128k context” and the model’s line. Nothing depends on colour.
- The model in use has a lit lamp and the words “in use” beside its name, and is the one selected.
- Moving through the rows says each one politely, once; choosing says “Lode Deep chosen.” The native select underneath keeps the form value and fires change, so a form posts it with no script.

## Related parts

- [Combobox](https://tactileui.dev/parts/combobox): A field that filters a long list as you type. It starts as a plain select, so it posts with the form and works without a script; then the options card slides out of a slot under the well, the letters that match print heavier and the chosen option’s lamp is lit. Several choices sit in the well as tags.
- [Listbox](https://tactileui.dev/parts/listbox): An always-open list let into the plate as a recess. The rows are printed on its floor and a chosen row is a cap let down into it with its lamp lit. One row may be chosen, or several; typing a few letters finds the next row that starts with them. It starts as a native select with a size, so it posts with the form and works without a script.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Token meter](https://tactileui.dev/parts/token-meter): How much of a model’s context a conversation has used, as a segmented meter with the limit printed at its end. The strip is the meter’s: dark glass, the unlit segments just visible. It is green while there is room, amber from a cut line near the limit and red once the count is over it. A line of words says the same in a sentence (“41k of 128k tokens”), and a small display carries the figures, so colour is never the only sign.