SelectProps — Kuito Documentation

Usage

Choose a size

This type is used by Select

tsx

import { Select, Text, VStack, signal } from 'kuito';

const SIZES = [
  { value: 's', label: 'Small' },
  { value: 'm', label: 'Medium' },
  { value: 'l', label: 'Large' },
];

export default function Size() {
  const size = signal<string | undefined>(undefined);

  return (
    <VStack gap={8} padding={16}>
      <Select label="Size" options={SIZES} value={size} placeholder="Choose a size" height={44} />
      <Text>{size.value ?? 'No size yet'}</Text>
    </VStack>
  );
}

Type declaration

export type SelectProps = {
  /** In the order the menu lists them; each value names one option. */
  options: SelectOption[];
  /**
   * The chosen option's value; none while it names no option. Two-way when
   * given a signal: the select writes it as the user picks.
   */
  value?: string;
  /** What it shows while no option is chosen. */
  placeholder?: string;
  disabled?: boolean;
  /** The value of the option the user picked. */
  onChange?: (value: string) => void;
};

Members 5

Name	Type	Required	Description
`options`	`SelectOption[]`	Yes	In the order the menu lists them; each value names one option.
`value`	`string`	No	The chosen option's value; none while it names no option. Two-way when given a signal: the select writes it as the user picks.
`placeholder`	`string`	No	What it shows while no option is chosen.
`disabled`	`boolean`	No	—
`onChange`	`(value: string) => void`	No	The value of the option the user picked.

onChange — method signatures

Signatures

(value: string): void

Parameters

Name	Type	Required	Description
`value`	`string`	Yes	—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.