Geist UI

Select

Display a dropdown list of items.

The Select contain an additional Hooks, see subsection useModal for details.

General

Basic usage.

Choose one

Code Editor

() => {
  const handler = val => console.log(val)
  return (
    <Select placeholder="Choose one" onChange={handler}>
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
  )
}

() => {
  const handler = val => console.log(val)
  return (
    <Select placeholder="Choose one" onChange={handler}>
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
  )
}

Type

Differentiate states by color.

Default

Option 1

Option 2

Option 1

Code Editor

() => (
  <>
    <Select placeholder="Default" type="default">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="success" initialValue="1">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="warning" initialValue="2">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="error" initialValue="1">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
  </>
)

() => (
  <>
    <Select placeholder="Default" type="default">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="success" initialValue="1">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="warning" initialValue="2">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="error" initialValue="1">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
  </>
)

Disabled

Disable all options.

Choose one

Code Editor

<Select placeholder="Choose one" disabled>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

<Select placeholder="Choose one" disabled>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

Disabled Option

disable specified options.

Choose one

Code Editor

<Select placeholder="Choose one">
  <Select.Option value="1" disabled>Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

<Select placeholder="Choose one">
  <Select.Option value="1" disabled>Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

Without Icon

Hide icon on right.

Choose one

Code Editor

<Select placeholder="Choose one" pure>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

<Select placeholder="Choose one" pure>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

Labels

show data as a group.

Frameworks

Code Editor

<Select placeholder="Frameworks">
  <Select.Option label>JavaScript</Select.Option>
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option label>Ruby</Select.Option>
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>

<Select placeholder="Frameworks">
  <Select.Option label>JavaScript</Select.Option>
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option label>Ruby</Select.Option>
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>

Divider

Frameworks

Code Editor

<Select placeholder="Frameworks">
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option divider />
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>

<Select placeholder="Frameworks">
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option divider />
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>

Multiple

Select supports multiple values to be selected.

React

Vue

Rails

Express

Code Editor

<Select placeholder="Frameworks" multiple width="200px" initialValue={['1', '3', '4', '6']}>
  <Select.Option value="1">React</Select.Option>
  <Select.Option value="2">Angular</Select.Option>
  <Select.Option value="3">Vue</Select.Option>
  <Select.Option divider />
  <Select.Option value="4">Rails</Select.Option>
  <Select.Option value="5">Sinatra</Select.Option>
  <Select.Option divider />
  <Select.Option value="6">Express</Select.Option>
  <Select.Option value="7">Koa</Select.Option>
</Select>

<Select placeholder="Frameworks" multiple width="200px" initialValue={['1', '3', '4', '6']}>
  <Select.Option value="1">React</Select.Option>
  <Select.Option value="2">Angular</Select.Option>
  <Select.Option value="3">Vue</Select.Option>
  <Select.Option divider />
  <Select.Option value="4">Rails</Select.Option>
  <Select.Option value="5">Sinatra</Select.Option>
  <Select.Option divider />
  <Select.Option value="6">Express</Select.Option>
  <Select.Option value="7">Koa</Select.Option>
</Select>

Multiple without clear

Select supports multiple values to be selected without the clear icon.

React

Vue

Rails

Express

Code Editor

<Select placeholder="Frameworks" multiple width="200px" clearable={false} initialValue={['1', '3', '4', '6']}>
  <Select.Option value="1">React</Select.Option>
  <Select.Option value="2">Angular</Select.Option>
  <Select.Option value="3">Vue</Select.Option>
  <Select.Option divider />
  <Select.Option value="4">Rails</Select.Option>
  <Select.Option value="5">Sinatra</Select.Option>
  <Select.Option divider />
  <Select.Option value="6">Express</Select.Option>
  <Select.Option value="7">Koa</Select.Option>
</Select>

<Select placeholder="Frameworks" multiple width="200px" clearable={false} initialValue={['1', '3', '4', '6']}>
  <Select.Option value="1">React</Select.Option>
  <Select.Option value="2">Angular</Select.Option>
  <Select.Option value="3">Vue</Select.Option>
  <Select.Option divider />
  <Select.Option value="4">Rails</Select.Option>
  <Select.Option value="5">Sinatra</Select.Option>
  <Select.Option divider />
  <Select.Option value="6">Express</Select.Option>
  <Select.Option value="7">Koa</Select.Option>
</Select>

Compose

Use with other components.

TypeScript

Code Editor

<Select placeholder="Choose one" initialValue="1">
  <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
  <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
</Select>

<Select placeholder="Choose one" initialValue="1">
  <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
  <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
</Select>

Over width

Option to show more text with adaptive width.

Truncate an overly long string

Autoscale option width when text is too long

Code Editor

<>
  <Select placeholder="Choose one" value="1" width="150px">
    <Select.Option value="1">Truncate an overly long string</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
  <Spacer h={.5} />
  <Select placeholder="Choose one" value="1" width="150px" disableMatchWidth>
    <Select.Option value="1">Autoscale option width when text is too long</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
</>

<>
  <Select placeholder="Choose one" value="1" width="150px">
    <Select.Option value="1">Truncate an overly long string</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
  <Spacer h={.5} />
  <Select placeholder="Choose one" value="1" width="150px" disableMatchWidth>
    <Select.Option value="1">Autoscale option width when text is too long</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
</>

Set parent element

you can specify the container for drop-down box rendering.

Code Editor

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Select</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Content id="customModalSelect">
          <Select placeholder="Choose one" initialValue="1"
            getPopupContainer={() => document.getElementById('customModalSelect')}>
            <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
            <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
          </Select>
          <p>Scroll through the content to see the changes.</p>
          <div style={{ height: '1200px' }}></div>
          <p>Scroll through the content to see the changes.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
      </Modal>
    </>
  )
}

() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Select</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Content id="customModalSelect">
          <Select placeholder="Choose one" initialValue="1"
            getPopupContainer={() => document.getElementById('customModalSelect')}>
            <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
            <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
          </Select>
          <p>Scroll through the content to see the changes.</p>
          <div style={{ height: '1200px' }}></div>
          <p>Scroll through the content to see the changes.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
      </Modal>
    </>
  )
}

APIs

`Select.Props`

Attribute	Description	Type	Accepted values	Default
value	selected value	`string`, `string[]`	-	-
initialValue	initial value	`string`, `string[]`	-	-
placeholder	placeholder string	`string`	-	-
width	css width value of select	`string`	-	`initial`
type	current type	`SelectTypes`	SelectTypes	`default`
icon	icon component	`ComponentType`	-	`SVG Component`
pure	remove icon component	`boolean`	-	`false`
multiple	support multiple selection	`boolean`	-	`false`
clearable	add clear icon on multiple selection (ignored otherwise)	`boolean`	-	`true`
disabled	disable current radio	`boolean`	-	`false`
onChange	selected value	`(val: string \| string[]) => void`	-	-
dropdownClassName	className of dropdown menu	`string`	-	-
dropdownStyle	style of dropdown menu	`object`	-	-
disableMatchWidth	disable Option from follow Select width	`boolean`	-	`false`
getPopupContainer	dropdown render parent element, the default is `body`	`() => HTMLElement`	-	-
onDropdownVisibleChange	dropdown change events	`(visible: boolean) => void`	-	-
ref	forwardRef	`SelectRef`	SelectRef	-
...	native props	`HTMLAttributes`	`'name', 'alt', ...`	-

`Select.Option.Props`

Attribute	Description	Type	Accepted values	Default
value(required)	unique ident value	`string`	-	-
disabled	disable current option	`boolean`	-	`false`
divider	display a line	`boolean`	-	`false`
label	display a group title	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'name', 'id', ...`	-

`SelectRef`

type SelectRef = {
  focus: () => void
  blur: () => void
  scrollTo?: (options?: ScrollToOptions) => void
}

`SelectTypes`

type SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'

Contributors

Geist is an open source project from the community.