SelectField

Maps a stored value to its label from a list of choices.

Installation

pnpm dlx shadcn@latest add @chelone/select-field

Maps a stored value to its label from a list of choices.

Props

PropTypeDefaultDescription
cellClassNamestring—A class name to apply to the cell element when used inside `<DataTable>`.
choicesreadonly ChoiceRecord[]—The list of choices to map the value against.
classNamestring—A class name to apply to the root element.
emptyReactNode—The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is.
headerClassNamestring—A class name to apply to the header cell element when used inside `<DataTable>`.
labelReactNode—Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label.
optionTextOptionText—The display path or a formatter. Default `'name'`.
optionValuestring—The value path on a choice. Default `'id'`.
recordRecordType—The record to render. Defaults to the ambient `RecordContext` value.
resourcestring—The resource name. Defaults to the ambient `ResourceContext` value.
sortableboolean—Disable the header click handler when used inside `<DataTable>`.
sortBystring—The field to sort by when this column head is clicked, if sortable.
sortByOrderSortOrder—The order used for sorting when this column head is clicked, if sortable.
sourcestring—Name of the property to display (dot/bracket path).
textAlignTextAlign—The text alignment for the cell content, when used inside `<DataTable>`.
translateChoiceboolean—Translate a string-path text through the catalog. Default `true`.