SelectField - AMiSi Mobile Starter

SelectField shows the selected label above an always-visible list of options.

Usage

import { useState } from 'react';

import { SelectField } from '@amisi-mobile-starter/ui';

const options = [
  { label: 'United States', value: 'us' },
  { label: 'Canada', value: 'ca' },
];

export const CountryField = () => {
  const [country, setCountry] = useState<string>();

  return (
    <SelectField
      label="Country"
      value={country}
      options={options}
      onValueChange={setCountry}
    />
  );
};

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Field label.
`value`	`string`	`undefined`	Controlled selected value.
`placeholder`	`string`	`'Select an option'`	Text shown when no option matches `value`.
`options`	`Array<{ label: string; value: string }>`	Required	Available options.
`onValueChange`	`(nextValue: string) => void`	Required	Runs when an option is pressed.
`helperText`	`string`	`undefined`	Supporting text shown when there is no error.
`error`	`string`	`undefined`	Error shown instead of helper text.
`optionProps`	`Omit<PressableProps, 'onPress'>`	`undefined`	Native props spread onto every option.

SelectField also accepts React Native ViewProps.