Select | RiseUI

HeroUI-aligned picker — select.tsx compound API, select.css trigger & popover (field height matches RiseInput, rounded-3xl menu).

Usage

Story `Default`: controlled single select, state list.

RiseSelect<String>(
  label: const Text('State'),
  placeholder: 'Select one',
  value: selected,
  items: states,
  onChanged: (v) => setState(() => selected = v),
)

With description

`WithDescription`: label + helper (select hides description when invalid).

RiseSelect<String>(
  label: const Text('State'),
  description: const Text('Select your state of residence'),
  placeholder: 'Select one',
)

With disabled options

`WithDisabledOptions`: non-selectable rows.

RiseSelect<String>(
  label: const Text('Animal'),
  items: const [
    RiseSelectItem(value: 'dog', label: 'Dog'),
    RiseSelectItem(value: 'kangaroo', label: 'Kangaroo', isDisabled: true),
  ],
)

Required form

`Required`: two fields + submit (mirrors HeroUI form story).

Column(
  children: [
    RiseSelect<String>(label: const Text('State'), isRequired: true, ...),
    RiseSelect<String>(label: const Text('Country'), isRequired: true, ...),
    RiseButton(onPressed: submit, child: const Text('Submit')),
  ],
)

Full width

`FullWidth`: `.select--full-width` / full-width trigger.

RiseSelect<String>(
  label: const Text('State'),
  fullWidth: true,
  placeholder: 'Select one',
)

Variants

`Variants`: primary (`shadow-field`) vs secondary (`shadow-none`).

[RiseSelect<String>(variant: RiseSelectVariant.primary, ...),
  RiseSelect<String>(variant: RiseSelectVariant.secondary, ...)]

Multiple select

`MultipleSelect`: checkmarks, menu stays open (`closeOnActivate: false`).

// Missing code for slug "multiple-select" in showcase-code-maps.ts

With sections

`WithSections`: grouped list headers.

// Missing code for slug "with-sections" in showcase-code-maps.ts

Custom indicator

`CustomIndicator`: replace chevron.

// Missing code for slug "custom-indicator" in showcase-code-maps.ts

Custom value

`CustomValue`: `triggerValueBuilder` + avatars in the trigger.

// Missing code for slug "custom-value" in showcase-code-maps.ts

Controlled

`Controlled`: external state + summary line.

// Missing code for slug "controlled" in showcase-code-maps.ts

Disabled

`Disabled`: non-interactive trigger.

RiseSelect<String>(
  enabled: false,
  value: 'california',
  onChanged: (_) {},
)