Browse docs

Select

Form connected select input build on top of Material-UI. Select integrates automatically with DashForm and the Dashforge form engine. Registration, validation, error handling, and RBAC orchestration are handled internally by the component.

Unlike the base MUI Select, this component is deigned primarily for form-driven workflows rather than standalone state management. The name prop is required to connect the field to the form schema and the internal form engine.

Select expects to run inside a DashForm context. Controlled mode is supported, but the name prop must still be provided so the component can participate in the Dashforge form engine.

Quick Start

tsx

const options = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
];
<Select name="country" label="Country" options={options} rules={{ required: 'Required' }} />

Examples

A select bound to the form by name. Options are { value, label } pairs; the form stores the value.

Country

<Select
  name="country"
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' },
  ]}
  fullWidth
/>

Error state with helper text — in a real form this is driven by validation.

Country

Please select a country

<Select
  name="country"
  label="Country"
  error
  helperText="Please select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
  ]}
  fullWidth
/>

layout="inline" places the label beside the control instead of above it.

Country

<Select
  name="country"
  label="Country"
  layout="inline"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' },
  ]}
  fullWidth
/>

API

Prop	Type	Default	Description
`name`	`string`	—	Field name. Required.
`options`	`{ value, label, disabled? }[]`	—	Options array. Required.
`label`	`string`	—	Field label.
`layout`	`'floating' \| 'stacked' \| 'inline'`	`'floating'`	Label position.
`placeholder`	`string`	—	Placeholder shown when no value selected.
`helperText`	`string`	—	Hint text below the field.
`disabled`	`boolean`	`false`	Disables the field.
`error`	`boolean`	`false`	Error visual state.
`fullWidth`	`boolean`	`false`	Fill container width.
`variant`	`'outlined' \| 'filled' \| 'standard'`	`'outlined'`	MUI variant.
`rules`	`RegisterOptions`	—	React Hook Form validation rules.
`access`	`AccessRequirement`	—	RBAC access requirement. Controls visibility, disabled, and readonly state based on role permissions.
`getOptionValue`	`(option) => string`	—	Custom value extractor for complex objects.
`getOptionLabel`	`(option) => string`	—	Custom label extractor.

Notes

Use getOptionValue / getOptionLabel when your options are objects with non-standard shapes.
optionsFromFieldData lets you populate options reactively from another field's value.

Capabilities

Select is designed for progressive adoption. Use it as a simple controlled component, integrate it with React Hook Form, or leverage Reactive V2 for runtime-driven options. Choose the level that fits your team's workflow.

Controlled

Select works as a standard React controlled component with familiar patterns. No proprietary lock-in required.

Standard value and onChange props
Low adoption friction for existing codebases
Suitable for incremental migration

tsx

<Select
  value={country}
  onChange={(e) => setCountry(e.target.value)}
  options={countries}
  label="Country"
/>

React Hook Form Ready

Integration-Friendly

Designed to integrate with React Hook Form workflows through DashForm. Compatible with existing form-library patterns.

Works with RHF through DashFormBridge Changed in 0.2.0-beta
Automatic validation and error handling
Supports gradual adoption without rewrites

tsx

<DashForm>
  <Select
    name="country"
    label="Country"
    options={countries}
  />
</DashForm>

Reactive

Select can load options dynamically from form state or external data. Supports conditional visibility and runtime-driven option loading.

Runtime options via optionsFromFieldData
Mapper functions for custom shapes
Conditional visibility with visibleWhen

tsx

<Select
  name="city"
  label="City"
  optionsFromFieldData="city"
  getOptionValue={(opt) => opt.id}
  getOptionLabel={(opt) => opt.name}
  visibleWhen={(engine) =>
    engine.getNode('country')?.value !== ''
  }
/>