> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SelectField

> Select a string value from an always-visible option list

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

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

<LocalUiPlayground component="select-field" title="Interactive SelectField example" />

## Usage

```tsx theme={null}
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`.