ModelSelector

Disclosure-backed model/provider picker for the prompt composer (native <details>).

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add model-selector

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { ModelSelector } from '@app/components/ui/model-selector.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><ModelSelector value={value} models={[{id:"standard",label:"Standard"},{id:"fast",label:"Fast"}]} onChange={setValue} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`ModelSelectorProps`	`value`	`string`	No	Selected model id.
`ModelSelectorProps`	`models`	`ModelOption[]`	No	Available models.
`ModelSelectorProps`	`onChange`	`(id: string) => void`	Yes	Invoked with the chosen model id.
`ModelSelectorProps`	`align`	`"left" \| "right"`	Yes	Menu alignment relative to the trigger.
`ModelSelectorProps`	`class`	`string`	Yes

TypeScript

ModelSelectorProps extends Omit<JSX.DetailsHTMLAttributes<HTMLDetailsElement>, "class" | "onChange">

Keyboard

Key	Action
`Enter/Space`	Toggle summary or activate an option button
`Tab`	Move through native option buttons

Tokens

Semantic contract roles: primary/text, text/muted.

CSS custom properties referenced directly: --ns-border, --ns-border-hover, --ns-border-width, --ns-control-h-sm, --ns-control-height-sm, --ns-control-padding-x-sm, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-mono, --ns-font-sans, --ns-leading-body, --ns-leading-caption, --ns-leading-small, --ns-marker, --ns-muted, --ns-muted-fg, --ns-primary, --ns-radius-card, --ns-radius-control, --ns-radius-md, --ns-radius-sm, --ns-ring, --ns-selected, --ns-shadow-lg, --ns-space-0-5, --ns-space-1, --ns-space-1-5, --ns-space-2, --ns-space-2-5, --ns-space-px, --ns-state-disabled-opacity, --ns-surface, --ns-surface-raised, --ns-text-2xs, --ns-text-body, --ns-text-caption, --ns-text-sm, --ns-text-small, --ns-text-xs, --ns-tracking-body, --ns-tracking-caption, --ns-tracking-small, --ns-weight-body, --ns-weight-caption, --ns-weight-strong, --ns-z-dropdown.

Contract and compatibility

Accessibility pattern: native disclosure and option buttons

Native DOM attributes pass through where the implementation accepts them.
Native details is the disclosure; the listbox role does not add roving arrow-key behavior.

Design contract values marked planned are not implementation props. The props above describe what ships today.