@sigx/lynx-daisyui · Stable · Component library

Select#

A tap-to-open dropdown for picking one value from a list of options, styled with daisyUI and built on native Lynx gestures.

Import#

TSX

import { Select } from '@sigx/lynx-daisyui';

Props#

Select supports two-way binding via the sigx model getter syntax (model={() => state.field}) — the dropdown writes the picked option's value straight back into your signal, no onChange plumbing. A static value (+ onChange) is still accepted for a fully-controlled setup.

Prop	Type	Default	Description
`model`	`Model<string>`	—	Two-way binding to a signal string. Pass a model accessor (e.g. `() => form.fruit`) so the selection flows back into your state.
`options`	`SelectOption[]`	`[]`	The choices to render. Each option is `{ label: string; value: string }` — `label` is shown, `value` is reported on change.
`value`	`string`	—	Controlled selection (alternative to `model`): the currently selected option's `value`. The matching option's `label` is shown on the trigger; if no option matches, `placeholder` is shown instead.
`placeholder`	`string`	`'Select...'`	Text shown on the trigger when `value` matches no option.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	—	Control size.
`variant`	`'bordered' \| 'ghost'`	—	Visual style. `bordered` adds an outline; `ghost` is borderless.
`color`	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	—	Accent color applied via the daisyUI `select-*` class.
`disabled`	`boolean`	`false`	Dims the control and prevents opening the dropdown.
`class`	`string`	—	Extra CSS classes appended to the trigger.

Events#

Event	Payload	Description
`onChange`	`(value: string) => void`	Fired when an option is tapped, with that option's `value`. The dropdown closes automatically.

Types#

TypeScript

interface SelectOption {
  label: string;
  value: string;
}

type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
type SelectVariant = 'bordered' | 'ghost';
type SelectColor =
  | 'primary' | 'secondary' | 'accent'
  | 'info' | 'success' | 'warning' | 'error';

Binding to state#

The simplest way is model — point it at a signal property, and the picked option's value is written straight back:

TSX

import { component } from '@sigx/lynx';
import { Select } from '@sigx/lynx-daisyui';

export const FruitPicker = component(({ signal }) => {
  const state = signal({ fruit: 'apple' });

  return () => (
    <Select
      model={() => state.fruit}
      options={[
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' },
        { label: 'Cherry', value: 'cherry' },
      ]}
    />
  );
});

If you'd rather control the value yourself, read it from a signal for value and write it back in onChange:

TSX

<Select
  value={state.fruit}
  onChange={(value) => { state.fruit = value; }}
  options={fruitOptions}
/>

Placeholder#

Leave value empty (or set it to something no option matches) to show the placeholder until the user picks.

TSX

import { component } from '@sigx/lynx';
import { Select } from '@sigx/lynx-daisyui';

export const CountryPicker = component(({ signal }) => {
  const state = signal({ country: '' });

  return () => (
    <Select
      value={state.country}
      placeholder="Choose a country"
      variant="bordered"
      onChange={(value) => { state.country = value; }}
      options={[
        { label: 'Sweden', value: 'se' },
        { label: 'Norway', value: 'no' },
        { label: 'Denmark', value: 'dk' },
      ]}
    />
  );
});

Sizes, colors and variants#

TSX

import { component } from '@sigx/lynx';
import { Select, Col } from '@sigx/lynx-daisyui';

const sizes = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' },
];

export const SelectGallery = component(({ signal }) => {
  const state = signal({ a: 'low', b: 'medium', c: 'high' });

  return () => (
    <Col gap="4">
      <Select
        size="sm"
        value={state.a}
        onChange={(value) => { state.a = value; }}
        options={sizes}
      />
      <Select
        color="primary"
        variant="bordered"
        value={state.b}
        onChange={(value) => { state.b = value; }}
        options={sizes}
      />
      <Select
        size="lg"
        color="success"
        disabled
        value={state.c}
        onChange={(value) => { state.c = value; }}
        options={sizes}
      />
    </Col>
  );
});