Selector

Select one or more from a set of options.

Install

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

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:

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