ModelSelector

Tier: clientUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { ModelSelector } from '@nizivo/react/unstable/model-selector';

const MODELS = [
  { value: 'fast', label: 'Fast', description: 'Quick answers for simple tasks' },
  { value: 'balanced', label: 'Balanced', description: 'Good for most work' },
  { value: 'deep', label: 'Deep', description: 'Slower, more careful reasoning' },
];

export function ModelSelectorExample(): JSX.Element {
  return <ModelSelector models={MODELS} defaultValue="balanced" />;
}

ImportCopy Anchor Link

import { ModelSelector } from '@nizivo/react/unstable/model-selector';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/popover.css and @nizivo/react/css/select.css
import '@nizivo/react/css/model-selector.css';

Static or interactiveCopy Anchor Link

Client. It is a Select: the same keyboard, typeahead and hidden native <select> for forms. How to choose.

ModelsCopy Anchor Link

models lists the choices, each with a value, a label that names the trade-off ("Balanced", never a version number) and a description that says it in words ("Good for most work"). value, defaultValue (the first model by default) and onValueChange hold the choice. The trigger shows the chosen name only; its accessible name ends with labels.label ("Balanced Model").

PropsCopy Anchor Link

Other exportsCopy Anchor Link

ModelOption type

import type { ModelOption } from '@nizivo/react/unstable/model-selector'

One choice.

Name	Type	Default	Description
description	string	–	What it trades, in words: "Good for most work".
disabled	boolean	–
labelrequired	string	–	The trade-off's name: "Balanced".
valuerequired	string	–

ModelSelectorLabels type

import type { ModelSelectorLabels } from '@nizivo/react/unstable/model-selector'

ModelSelector's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
labelrequired	string	'Model'	Names the trigger, after the chosen model ("Balanced Model"), as every Select reads.

ModelSelectorProps type

import type { ModelSelectorProps } from '@nizivo/react/unstable/model-selector'

The props of ModelSelector, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-model-selector, .nz-model-selector-chevron, .nz-model-selector-description, .nz-model-selector-item, .nz-model-selector-name, .nz-model-selector-popup, .nz-model-selector-text, .nz-model-selector-trigger, .nz-model-selector-value, .nz-select-chevron, .nz-select-icon, .nz-select-item, .nz-select-popup, .nz-select-trigger.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• model-selector-item: draws the focus outline when the engine reports keyboard focus, not on pointer hover.
• model-selector-trigger: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.