输入框

用于在文本字段中获取用户输入。

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

const Demo = () => {
  return <Input placeholder="Enter your email" />
}

用法

¥Usage

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

<Input />

示例

¥Examples

变量

¥Variants

使用 variant 属性更改输入框的视觉样式。

¥Use the variant prop to change the visual style of the input.

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

const Demo = () => {
  return (
    <Stack gap="4">
      <Input placeholder="Subtle" variant="subtle" />
      <Input placeholder="Outline" variant="outline" />
      <Input placeholder="Flushed" variant="flushed" />
    </Stack>
  )
}

尺寸

¥Sizes

使用 size 属性更改输入框的大小。

¥Use the size prop to change the size of the input.

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

const Demo = () => {
  return (
    <Stack gap="4">
      <Input placeholder="size (xs)" size="xs" />
      <Input placeholder="size (sm)" size="sm" />
      <Input placeholder="size (md)" size="md" />
      <Input placeholder="size (lg)" size="lg" />
    </Stack>
  )
}

辅助文本

¥Helper Text

将输入框与 Field 组件配对以添加帮助文本。

¥Pair the input with the Field component to add helper text.

Email We'll never share your email.

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

const Demo = () => {
  return (
    <Field.Root required>
      <Field.Label>
        Email <Field.RequiredIndicator />
      </Field.Label>
      <Input placeholder="Enter your email" />
      <Field.HelperText>We'll never share your email.</Field.HelperText>
    </Field.Root>
  )
}

错误文本

¥Error Text

将输入框与 Field 组件配对以添加错误文本。

¥Pair the input with the Field component to add error text.

EmailThis field is required

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

const Demo = () => {
  return (
    <Field.Root invalid>
      <Field.Label>Email</Field.Label>
      <Input placeholder="Enter your email" />
      <Field.ErrorText>This field is required</Field.ErrorText>
    </Field.Root>
  )
}

字段

¥Field

使用 Field 组件编写输入，添加标签、帮助文本和错误文本。

¥Compose the input with the Field component to add a label, helper text, and error text.

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

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root required>
        <Field.Label>
          Email <Field.RequiredIndicator />
        </Field.Label>
        <Input placeholder="me@example.com" variant="subtle" />
      </Field.Root>
      <Field.Root required>
        <Field.Label>
          Email <Field.RequiredIndicator />
        </Field.Label>
        <Input placeholder="me@example.com" variant="outline" />
      </Field.Root>
    </HStack>
  )
}

钩子表单

¥Hook Form

以下是如何将输入框与 react-hook-form 集成的示例。

¥Here's an example of how to integrate the input with react-hook-form.

"use client"

import { Button, Field, Input, Stack } from "@chakra-ui/react"
import { useForm } from "react-hook-form"

interface FormValues {
  firstName: string
  lastName: string
}

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

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

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field.Root invalid={!!errors.firstName}>
          <Field.Label>First name</Field.Label>
          <Input {...register("firstName")} />
          <Field.ErrorText>{errors.firstName?.message}</Field.ErrorText>
        </Field.Root>

        <Field.Root invalid={!!errors.lastName}>
          <Field.Label>Last name</Field.Label>
          <Input {...register("lastName")} />
          <Field.ErrorText>{errors.lastName?.message}</Field.ErrorText>
        </Field.Root>

        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

元素

¥Element

使用 InputGroup 组件上的 startElement 和 endElement 修饰符，在输入框的开头和结尾添加元素。

¥Use the startElement and endElement on the InputGroup component to add an element to the start and end of the input.

启动图标

¥Start Icon

import { Input, InputGroup } from "@chakra-ui/react"
import { LuUser } from "react-icons/lu"

const Demo = () => {
  return (
    <InputGroup startElement={<LuUser />}>
      <Input placeholder="Username" />
    </InputGroup>
  )
}

起始文本

¥Start Text

https://

import { Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <InputGroup
      startElement="https://"
      startElementProps={{ color: "fg.muted" }}
    >
      <Input ps="7ch" placeholder="yoursite.com" />
    </InputGroup>
  )
}

起始和结束文本

¥Start and End Text

USD

import { Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <InputGroup startElement="$" endElement="USD">
      <Input placeholder="0.00" />
    </InputGroup>
  )
}

Kbd

⌘K

import { Input, InputGroup, Kbd } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"

export const InputWithKbd = () => (
  <InputGroup flex="1" startElement={<LuSearch />} endElement={<Kbd>⌘K</Kbd>}>
    <Input placeholder="Search contacts" />
  </InputGroup>
)

选择

¥Select

https://

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

const DomainSelect = () => (
  <NativeSelect.Root size="xs" variant="plain" width="auto" me="-1">
    <NativeSelect.Field defaultValue=".com" fontSize="sm">
      <option value=".com">.com</option>
      <option value=".org">.org</option>
      <option value=".net">.net</option>
    </NativeSelect.Field>
    <NativeSelect.Indicator />
  </NativeSelect.Root>
)

const Demo = () => {
  return (
    <InputGroup flex="1" startElement="https://" endElement={<DomainSelect />}>
      <Input ps="4.75em" pe="0" placeholder="yoursite.com" />
    </InputGroup>
  )
}

插件

¥Addon

使用 InputAddon 和 Group 组件向输入框添加插件。

¥Use the InputAddon and Group components to add an addon to the input.

启动插件

¥Start Addon

https://

import { Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <InputGroup startAddon="https://">
      <Input placeholder="yoursite.com" />
    </InputGroup>
  )
}

结束插件

¥End Addon

.com

import { Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <InputGroup endAddon=".com">
      <Input placeholder="yoursite" />
    </InputGroup>
  )
}

启动和结束插件

¥Start and End Addon

USD

import { Input, InputGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <InputGroup startAddon="$" endAddon="USD">
      <Input placeholder="0.00" />
    </InputGroup>
  )
}

已禁用

¥Disabled

使用 disabled 属性禁用输入。

¥Use the disabled prop to disable the input.

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

const Demo = () => {
  return <Input disabled placeholder="disabled" />
}

按钮

¥Button

使用 Group 组件将按钮附加到输入框。

¥Use the Group component to attach a button to the input.

import { Button, Group, Input } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Group attached w="full" maxW="sm">
      <Input flex="1" placeholder="Enter your email" />
      <Button bg="bg.subtle" variant="outline">
        Submit
      </Button>
    </Group>
  )
}

焦点和错误颜色

¥Focus and Error Color

使用 --focus-color 和 --error-color CSS 自定义属性更改输入框获得焦点或处于错误状态时的颜色。

¥Use the --focus-color and --error-color CSS custom properties to change the color of the input when it is focused or in an error state.

focusColor=lime

errorColor=green

errorColor=blue

variant=outline,focusColor=error

variant=subtle,focusColor=error

variant=flushed,focusColor=error

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

const Demo = () => {
  return (
    <Stack gap="4">
      <Field.Root>
        <Field.Label>focusColor=lime</Field.Label>
        <Input placeholder="Focus me" css={{ "--focus-color": "lime" }} />
      </Field.Root>
      <Field.Root invalid>
        <Field.Label>errorColor=green</Field.Label>
        <Input placeholder="Email" css={{ "--error-color": "green" }} />
      </Field.Root>
      <Field.Root invalid>
        <Field.Label>errorColor=blue</Field.Label>
        <Input placeholder="Password" css={{ "--error-color": "blue" }} />
      </Field.Root>

      <Field.Root invalid>
        <Field.Label>variant=outline,focusColor=error</Field.Label>
        <Input placeholder="Focus me" variant="outline" />
      </Field.Root>
      <Field.Root invalid>
        <Field.Label>variant=subtle,focusColor=error</Field.Label>
        <Input placeholder="Focus me" variant="subtle" />
      </Field.Root>
      <Field.Root invalid>
        <Field.Label>variant=flushed,focusColor=error</Field.Label>
        <Input placeholder="Focus me" variant="flushed" />
      </Field.Root>
    </Stack>
  )
}

占位符样式

¥Placeholder Style

使用 _placeholder 属性设置占位符文本的样式。

¥Use the _placeholder prop to style the placeholder text.

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

const Demo = () => {
  return (
    <Input
      color="teal"
      placeholder="custom placeholder"
      _placeholder={{ color: "inherit" }}
    />
  )
}

浮动标签

¥Floating Label

以下是如何为输入框构建浮动标签的示例。

¥Here's an example of how to build a floating label to the input.

import { Box, Field, Input, defineStyle } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Field.Root>
      <Box pos="relative" w="full">
        <Input className="peer" placeholder="" />
        <Field.Label css={floatingStyles}>Email</Field.Label>
      </Box>
    </Field.Root>
  )
}

const floatingStyles = defineStyle({
  pos: "absolute",
  bg: "bg",
  px: "0.5",
  top: "-3",
  insetStart: "2",
  fontWeight: "normal",
  pointerEvents: "none",
  transition: "position",
  _peerPlaceholderShown: {
    color: "fg.muted",
    top: "2.5",
    insetStart: "3",
  },
  _peerFocusVisible: {
    color: "fg",
    top: "-3",
    insetStart: "2",
  },
})

蒙版

¥Mask

以下是使用 use-mask-input 库遮罩输入形状的示例。

¥Here's an example of using the use-mask-input library to mask the input shape.

"use client"

import { Input } from "@chakra-ui/react"
import { withMask } from "use-mask-input"

const Demo = () => {
  return (
    <Input placeholder="(99) 99999-9999" ref={withMask("(99) 99999-9999")} />
  )
}

字符计数器

¥Character Counter

以下是如何在输入中添加字符计数器的示例。

¥Here's an example of how to add a character counter to the input.

0 / 20

"use client"

import { Input, InputGroup, Span } from "@chakra-ui/react"
import { useState } from "react"

const MAX_CHARACTERS = 20

const Demo = () => {
  const [value, setValue] = useState("")
  return (
    <InputGroup
      endElement={
        <Span color="fg.muted" textStyle="xs">
          {value.length} / {MAX_CHARACTERS}
        </Span>
      }
    >
      <Input
        placeholder="Enter your message"
        value={value}
        maxLength={MAX_CHARACTERS}
        onChange={(e) => {
          setValue(e.currentTarget.value.slice(0, MAX_CHARACTERS))
        }}
      />
    </InputGroup>
  )
}

卡片编号

¥Card Number

以下是使用 react-payment-inputs 创建卡号输入的示例。

¥Here's an example of using react-payment-inputs to create a card number input.

"use client"

import { Input, InputGroup } from "@chakra-ui/react"
import { LuCreditCard } from "react-icons/lu"
import { usePaymentInputs } from "react-payment-inputs"

const Demo = () => {
  const { wrapperProps, getCardNumberProps } = usePaymentInputs()
  return (
    <InputGroup {...wrapperProps} endElement={<LuCreditCard />}>
      <Input {...getCardNumberProps()} />
    </InputGroup>
  )
}

你可以为卡号、有效期和 CVC 创建完整的卡片输入。

¥You can create a full card inputs for a card number, expiry date, and CVC.

"use client"

import { Box, Group, Input, InputGroup, Show } from "@chakra-ui/react"
import { LuCreditCard } from "react-icons/lu"
import { usePaymentInputs } from "react-payment-inputs"
import cardImages, { type CardImages } from "react-payment-inputs/images"

const images = cardImages as unknown as CardImages

const CardImage = (props: ReturnType<typeof usePaymentInputs>) => {
  const { meta, getCardImageProps } = props
  return (
    <Show
      when={meta.cardType}
      fallback={<LuCreditCard size={16} aria-hidden="true" />}
    >
      <svg {...getCardImageProps({ images })} />
    </Show>
  )
}

const Demo = () => {
  const payment = usePaymentInputs()
  return (
    <Box spaceY="-1px">
      <InputGroup
        zIndex={{ _focusWithin: "1" }}
        endElement={<CardImage {...payment} />}
      >
        <Input roundedBottom="0" {...payment.getCardNumberProps()} />
      </InputGroup>
      <Group w="full" attached>
        <Input roundedTopLeft="0" {...payment.getExpiryDateProps()} />
        <Input roundedTopRight="0" {...payment.getCVCProps()} />
      </Group>
    </Box>
  )
}

清除按钮

¥Clear Button

组合 Input 和 CloseButton 组件以创建一个清除按钮。这对于构建搜索输入非常有用。

¥Combine the Input and CloseButton components to create a clear button. This is useful for building search inputs.

"use client"

import { CloseButton, Input, InputGroup } from "@chakra-ui/react"
import { useRef, useState } from "react"

const Demo = () => {
  const [value, setValue] = useState("Initial value")
  const inputRef = useRef<HTMLInputElement | null>(null)

  const endElement = value ? (
    <CloseButton
      size="xs"
      onClick={() => {
        setValue("")
        inputRef.current?.focus()
      }}
      me="-2"
    />
  ) : undefined

  return (
    <InputGroup endElement={endElement}>
      <Input
        ref={inputRef}
        placeholder="Email"
        value={value}
        onChange={(e) => {
          setValue(e.currentTarget.value)
        }}
      />
    </InputGroup>
  )
}

属性

¥Props

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` The size of the component
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'` The variant of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

文件上传

数字输入

输入框

.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;}用法

用法