# Selector

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/selector
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Select one or more from a set of options.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Select one or more from a set of options.

## When to Use

Provides multiple options for the user to choose from, typically used in filters and forms.

## Demos

## Selector

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| columns | Number of the displayed columns (Note that `grid` layout not support in IOS 9) | `number` | - |
| defaultValue | Selected value by default | `SelectorValue[]` | `[]` |
| disabled | Whether to all disable selecting | `boolean` | `false` |
| fieldNames | Custom field name for label and value and disabled | `{ label: string, value: string, disabled: string }` | `{ label: 'label', value: 'value',disabled:'disabled' }` |
| multiple | Whether to allow multiple selections | `boolean` | `false` |
| onChange | Triggered when the value is changed | `(value: SelectorValue[], extend: { items: SelectorOption[] }) => void` | - |
| options | Optional selector | `SelectorOption[]` | - |
| showCheckMark | Whether to show the check mark | `boolean` | `true` |
| value | Selected value | `SelectorValue[]` | - |

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --border | border style | `none` |
| --border-radius | Border radius of options | `2px` |
| --checked-border | Border style when checked | `none` |
| --checked-color | Background color when checked | `var(--adm-color-wathet)` |
| --checked-text-color | Text color when checked | `var(--adm-color-primary)` |
| --color | Background color | `#f5f5f5` |
| --padding | Padding of options | `8px 16px` |
| --text-color | Text color | `var(--adm-color-text)` |
| --gap | The gap between items, only take effect with `columns` | `8px` |
| --gap-horizontal | The horizontal gap between items, only take effect with `columns` | `var(--gap)` |
| --gap-vertical | The vertical gap between items, only take effect with `columns` | `var(--gap)` |

## Types

### SelectorValue

```ts | pure
type SelectorValue = string | number
```

### SelectorOption

| Name        | Description         | Type            | Default |
| ----------- | ------------------- | --------------- | ------- |
| description | Description text    | `ReactNode`     | -       |
| disabled    | Whether disabled    | `boolean`       | `false` |
| label       | Label text          | `ReactNode`     | -       |
| value       | Value of the option | `SelectorValue` | -       |

## Generics

`Selector` supports generics, you can manually control the type of attributes such as `value` and `onChange` in the following way:

```tsx
<Selector<'a' | 'b' | number>
  options={options}
  defaultValue={['a']}
  onChange={arr => console.log(arr)}
/>
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt