SelectField

A dropdown select field for choosing from a list of options.

Props

Prop	Type	Description
value	(instance: TCommand) => unknown	Required. Accessor function returning the property value from the command instance.
title	string	The label for the field.
options	Array<{ [key: string]: unknown }>	Required. Array of option objects.
optionIdField	string	Required. Name of the property to use as the option value.
optionLabelField	string	Required. Name of the property to display as the option label.
placeholder	string	Placeholder text shown for empty selection.
required	boolean	Override automatic required detection.

Example

const countries = [
    { id: 'us', name: 'United States' },
    { id: 'uk', name: 'United Kingdom' },
    { id: 'ca', name: 'Canada' },
    { id: 'no', name: 'Norway' }
];

<SelectField<UserCommand>
    value={c => c.country}
    title="Country"
    options={countries}
    optionIdField="id"
    optionLabelField="name"
    placeholder="Select a country..."
/>

With custom data:

const roles = [
    { value: 'admin', display: 'Administrator' },
    { value: 'user', display: 'Standard User' },
    { value: 'guest', display: 'Guest' }
];

<SelectField<UserCommand>
    value={c => c.role}
    title="User Role"
    options={roles}
    optionIdField="value"
    optionLabelField="display"
/>

See Also

• Field Types Overview
• CommandForm Overview