选择 (原生)

用于从预定义选项中选择一个值。

import { NativeSelect } from "@chakra-ui/react"

const Demo = () => {
  return (
    <NativeSelect.Root size="sm" width="240px">
      <NativeSelect.Field placeholder="Select option">
        <option value="react">React</option>
        <option value="vue">Vue</option>
        <option value="angular">Angular</option>
        <option value="svelte">Svelte</option>
      </NativeSelect.Field>
      <NativeSelect.Indicator />
    </NativeSelect.Root>
  )
}

用法

import { NativeSelect } from "@chakra-ui/react"

<NativeSelect.Root>
  <NativeSelect.Field>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </NativeSelect.Field>
  <NativeSelect.Indicator />
</NativeSelect.Root>

信息

如果您喜欢封闭的组件组合，请查看以下代码片段。

示例

尺寸

使用 size prop 来改变选择组件的尺寸。

import { For, NativeSelect, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4" width="240px">
      <For each={["xs", "sm", "md", "lg", "xl"]}>
        {(size) => (
          <NativeSelect.Root key={size} size={size}>
            <NativeSelect.Field placeholder="Select option">
              <option value="react">React</option>
              <option value="vue">Vue</option>
              <option value="angular">Angular</option>
              <option value="svelte">Svelte</option>
            </NativeSelect.Field>
            <NativeSelect.Indicator />
          </NativeSelect.Root>
        )}
      </For>
    </Stack>
  )
}

变体

使用 variant prop 来改变选择组件的外观。

import { For, NativeSelect, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4" width="240px">
      <For each={["outline", "subtle", "plain"]}>
        {(variant) => (
          <NativeSelect.Root key={variant} variant={variant}>
            <NativeSelect.Field placeholder={`variant (${variant})`}>
              <option value="react">React</option>
              <option value="vue">Vue</option>
              <option value="angular">Angular</option>
              <option value="svelte">Svelte</option>
            </NativeSelect.Field>
            <NativeSelect.Indicator />
          </NativeSelect.Root>
        )}
      </For>
    </Stack>
  )
}

受控

使用 value 和 onChange props 来控制选择组件。

"use client"

import { NativeSelect } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState("")
  return (
    <NativeSelect.Root size="sm" width="240px">
      <NativeSelect.Field
        placeholder="Select option"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      >
        <option value="react">React</option>
        <option value="vue">Vue</option>
        <option value="angular">Angular</option>
        <option value="svelte">Svelte</option>
      </NativeSelect.Field>
      <NativeSelect.Indicator />
    </NativeSelect.Root>
  )
}

禁用

将 disabled prop 传递给 NativeSelect.Root 组件以禁用选择组件。

import { NativeSelect } from "@chakra-ui/react"

export const NativeSelectWithDisabled = () => (
  <NativeSelect.Root disabled>
    <NativeSelect.Field placeholder="Select option">
      <option value="react">React</option>
      <option value="vue">Vue</option>
      <option value="angular">Angular</option>
      <option value="svelte">Svelte</option>
    </NativeSelect.Field>
    <NativeSelect.Indicator />
  </NativeSelect.Root>
)

无效

组合原生和 Field 组件来设置无效状态并显示错误文本。

这是一个错误

import { Field, NativeSelect } from "@chakra-ui/react"

export const NativeSelectWithInvalid = () => (
  <Field.Root invalid width="240px">
    <NativeSelect.Root>
      <NativeSelect.Field placeholder="Select option">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </NativeSelect.Field>
      <NativeSelect.Indicator />
    </NativeSelect.Root>
    <Field.ErrorText>This is an error</Field.ErrorText>
  </Field.Root>
)

或者，您也可以在 NativeSelect.Root 组件上使用 invalid prop。

import { NativeSelect } from "@chakra-ui/react"

export const NativeSelectWithInvalidRoot = () => (
  <NativeSelect.Root invalid width="240px">
    <NativeSelect.Field placeholder="Select option">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </NativeSelect.Field>
    <NativeSelect.Indicator />
  </NativeSelect.Root>
)

Hook Form

以下是如何将 NativeSelect 组件与 react-hook-form 一起使用的示例。

"use client"

import { Button, Field, NativeSelect } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  framework: z.string().min(1, { message: "Framework is required" }),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Field.Root invalid={!!errors.framework}>
        <Field.Label>Framework</Field.Label>
        <NativeSelect.Root size="sm" width="240px">
          <NativeSelect.Field
            placeholder="Select option"
            {...register("framework")}
          >
            <option value="react">React</option>
            <option value="vue">Vue</option>
            <option value="angular">Angular</option>
            <option value="svelte">Svelte</option>
          </NativeSelect.Field>
          <NativeSelect.Indicator />
        </NativeSelect.Root>
        <Field.ErrorText>{errors.framework?.message}</Field.ErrorText>
      </Field.Root>

      <Button size="sm" type="submit" mt="4">
        Submit
      </Button>
    </form>
  )
}

引用

以下是如何访问底层元素引用

import { NativeSelect } from "@chakra-ui/react"

const Demo = () => {
  const ref = useRef<HTMLSelectElement | null>(null)
  return (
    <NativeSelect.Root>
      <NativeSelect.Field ref={ref}>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </NativeSelect.Field>
      <NativeSelect.Indicator />
    </NativeSelect.Root>
  )
}

封闭组件

以下是如何为封闭组件组合设置 Native Select。

"use client"

import { NativeSelect as Select } from "@chakra-ui/react"
import * as React from "react"

type FieldProp = "name" | "value" | "onChange" | "defaultValue"

interface NativeSelectProps
  extends Omit<Select.RootProps, FieldProp>,
    Pick<Select.FieldProps, FieldProp> {
  icon?: React.ReactNode
  items: Array<{ label: string; value: string; disabled?: boolean }>
}

export const NativeSelect = React.forwardRef<
  HTMLSelectElement,
  NativeSelectProps
>(function NativeSelect(props, ref) {
  const {
    icon,
    children,
    name,
    items,
    value,
    defaultValue,
    onChange,
    ...rest
  } = props
  return (
    <Select.Root {...rest}>
      <Select.Field
        ref={ref}
        name={name}
        value={value}
        defaultValue={defaultValue}
        onChange={onChange}
      >
        {children}
        {items?.map((item) => (
          <option key={item.value} value={item.value} disabled={item.disabled}>
            {item.label}
          </option>
        ))}
      </Select.Field>
      <Select.Indicator>{icon}</Select.Indicator>
    </Select.Root>
  )
})

如果您想自动将封闭组件添加到您的项目中，请运行此命令

npx @chakra-ui/cli snippet add native-select

属性

根

属性	默认值	类型
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'plain'` 组件的变体
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` 组件的尺寸
`as`		`React.ElementType` 要渲染的底层元素。
`asChild`		`boolean` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。
`unstyled`		`boolean` 是否移除组件的样式。

上一个

Segmented Control

下一个

Select

选择 (原生)

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法