select

import { select } from '@markless/ui';

export default function Fruitfunction Fruit(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<select.root(alias) function root({ value, open, disabled, required, name, onChange, onOpenChange, children, ...rest }: select.SelectRootProps): Element name(property) name?: string | undefinedSubmitted under this name by `select.field`.="fruit">
		<select.label(alias) function label({ children, ...rest }: select.SelectLabelProps): Element>Favourite fruit</select.label(alias) function label({ children, ...rest }: select.SelectLabelProps): Element>
		<select.trigger(alias) function trigger({ children, onClick, onKeydown, ...rest }: select.SelectTriggerProps): Element>Choose a fruit</select.trigger(alias) function trigger({ children, onClick, onKeydown, ...rest }: select.SelectTriggerProps): Element>
		<select.content(alias) function content({ children, onDismiss, onKeydown, ...rest }: select.SelectContentProps): Element>
			<select.item(alias) function item({ value, disabled, children, onClick, ...rest }: select.SelectItemProps): Element value(property) value: stringSubmitted when this option is the chosen one. Required: no index stands in for it.="apple">
				<select.itemlabel(alias) function itemlabel({ children, ...rest }: select.SelectItemLabelProps): Element>Apple</select.itemlabel(alias) function itemlabel({ children, ...rest }: select.SelectItemLabelProps): Element>
				<select.itemindicator(alias) function itemindicator({ children, ...rest }: select.SelectItemIndicatorProps): Element>Chosen</select.itemindicator(alias) function itemindicator({ children, ...rest }: select.SelectItemIndicatorProps): Element>
			</select.item(alias) function item({ value, disabled, children, onClick, ...rest }: select.SelectItemProps): Element>
			<select.item(alias) function item({ value, disabled, children, onClick, ...rest }: select.SelectItemProps): Element value(property) value: stringSubmitted when this option is the chosen one. Required: no index stands in for it.="banana">
				<select.itemlabel(alias) function itemlabel({ children, ...rest }: select.SelectItemLabelProps): Element>Banana</select.itemlabel(alias) function itemlabel({ children, ...rest }: select.SelectItemLabelProps): Element>
				<select.itemindicator(alias) function itemindicator({ children, ...rest }: select.SelectItemIndicatorProps): Element>Chosen</select.itemindicator(alias) function itemindicator({ children, ...rest }: select.SelectItemIndicatorProps): Element>
			</select.item(alias) function item({ value, disabled, children, onClick, ...rest }: select.SelectItemProps): Element>
		</select.content(alias) function content({ children, onDismiss, onKeydown, ...rest }: select.SelectContentProps): Element>
		<select.field(alias) function field({ ...rest }: select.SelectFieldProps): Element />
	</select.root(alias) function root({ value, open, disabled, required, name, onChange, onOpenChange, children, ...rest }: select.SelectRootProps): Element>
}

A button that opens a listbox, with typeahead over the option labels and the arrow keys walking them. An option is named by its required value — no index stands in for it — so reordering the list is a reorder and never a silent change of what is chosen. multiple is deliberately absent: it is the one prop that turns value into a union and doubles the keyboard table.

Anatomy

• select.root — holds the configuration. It renders no role of its own.
• select.label — names the trigger and the listbox.
• select.trigger — the button that opens the popup.
• select.content — the listbox.
• select.item — one option, named by its required value.
• select.itemlabel and select.itemindicator — that option's parts.
• select.field — the hidden native <select> that carries the choice into a form.

It writes ui-open, ui-closed, ui-selected, ui-hidden, ui-required and ui-disabled.

Props on select.root

Prop	Type	What it does
value	string	The value of the chosen option. Omit it and nothing is chosen.
open	boolean	The popup is showing. Omit it and it starts closed.
disabled	boolean	Nobody can change the choice.
required	boolean	A choice is needed before the form submits.
name	string	Submitted under this name by select.field.
onChange	(value) => void	Called with the new value when a person chooses a different option.
onOpenChange	(open) => void	Called when the popup opens or closes.

Everything a <div> accepts reaches the element too. select.item takes its own value and disabled.