Input 输入框组件 #

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

function Example() {
  return <Input placeholder="请输入内容" />
}

<Input size="xs" placeholder="超小输入框" />
<Input size="sm" placeholder="小输入框" />
<Input size="md" placeholder="中等输入框（默认）" />
<Input size="lg" placeholder="大输入框" />

<Input variant="outline" placeholder="轮廓输入框（默认）" />
<Input variant="filled" placeholder="填充输入框" />
<Input variant="flushed" placeholder="下划线输入框" />
<Input variant="unstyled" placeholder="无样式输入框" />

<Input isDisabled placeholder="禁用输入框" />

<Input isInvalid placeholder="错误输入框" />

<Input isReadOnly placeholder="只读输入框" />

<Input isRequired placeholder="必填输入框" />

<Input type="text" placeholder="文本输入" />
<Input type="email" placeholder="邮箱输入" />
<Input type="password" placeholder="密码输入" />
<Input type="number" placeholder="数字输入" />
<Input type="tel" placeholder="电话输入" />
<Input type="url" placeholder="URL 输入" />
<Input type="search" placeholder="搜索输入" />
<Input type="date" placeholder="日期输入" />
<Input type="time" placeholder="时间输入" />
<Input type="datetime-local" placeholder="日期时间输入" />

import { InputGroup, InputLeftElement, InputRightElement } from '@chakra-ui/react'
import { SearchIcon, PhoneIcon, CheckIcon } from '@chakra-ui/icons'

<InputGroup>
  <InputLeftElement children={<PhoneIcon color="gray.300" />} />
  <Input type="tel" placeholder="电话号码" />
</InputGroup>

<InputGroup>
  <InputLeftElement children={<SearchIcon color="gray.300" />} />
  <Input placeholder="搜索..." />
</InputGroup>

<InputGroup>
  <Input type="email" placeholder="邮箱地址" />
  <InputRightElement children={<CheckIcon color="green.500" />} />
</InputGroup>

import { InputLeftAddon, InputRightAddon } from '@chakra-ui/react'

<InputGroup>
  <InputLeftAddon children="https://" />
  <Input placeholder="yourwebsite.com" />
</InputGroup>

<InputGroup>
  <Input placeholder="金额" />
  <InputRightAddon children=".00" />
</InputGroup>

<InputGroup size="sm">
  <InputLeftAddon children="+86" />
  <Input type="tel" placeholder="手机号码" />
</InputGroup>

function PasswordInput() {
  const [show, setShow] = useState(false)
  const handleClick = () => setShow(!show)

  return (
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type={show ? 'text' : 'password'}
        placeholder="输入密码"
      />
      <InputRightElement width="4.5rem">
        <Button h="1.75rem" size="sm" onClick={handleClick}>
          {show ? '隐藏' : '显示'}
        </Button>
      </InputRightElement>
    </InputGroup>
  )
}

import { FormControl, FormLabel, FormHelperText, FormErrorMessage } from '@chakra-ui/react'

function FormInput() {
  const [value, setValue] = useState('')
  const isError = value === ''

  return (
    <FormControl isInvalid={isError}>
      <FormLabel>邮箱</FormLabel>
      <Input
        type="email"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      {!isError ? (
        <FormHelperText>请输入有效的邮箱地址</FormHelperText>
      ) : (
        <FormErrorMessage>邮箱地址不能为空</FormErrorMessage>
      )}
    </FormControl>
  )
}

function ControlledInput() {
  const [value, setValue] = useState('')

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="受控输入"
    />
  )
}

<Input
  focusBorderColor="lime"
  placeholder="自定义焦点颜色"
/>

<Input
  focusBorderColor="pink.400"
  placeholder="自定义焦点颜色"
/>

<Input
  errorBorderColor="red.300"
  isInvalid
  placeholder="自定义错误颜色"
/>

function SearchInput({ onSearch }) {
  const [value, setValue] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    onSearch(value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <InputGroup>
        <InputLeftElement>
          <SearchIcon color="gray.400" />
        </InputLeftElement>
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="搜索..."
          borderRadius="full"
        />
      </InputGroup>
    </form>
  )
}

function VerificationInput() {
  return (
    <HStack spacing={2}>
      {[1, 2, 3, 4, 5, 6].map((i) => (
        <Input
          key={i}
          w="40px"
          h="50px"
          textAlign="center"
          maxLength={1}
          size="lg"
        />
      ))}
    </HStack>
  )
}

function TagInput() {
  const [tags, setTags] = useState(['React', 'Chakra UI'])
  const [input, setInput] = useState('')

  const addTag = () => {
    if (input && !tags.includes(input)) {
      setTags([...tags, input])
      setInput('')
    }
  }

  return (
    <Box>
      <InputGroup>
        <Input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="添加标签"
          onKeyDown={(e) => e.key === 'Enter' && addTag()}
        />
        <InputRightElement>
          <Button size="sm" onClick={addTag}>添加</Button>
        </InputRightElement>
      </InputGroup>
      <HStack mt={2} wrap="wrap">
        {tags.map((tag) => (
          <Tag key={tag} size="sm" borderRadius="full">
            <TagLabel>{tag}</TagLabel>
            <TagCloseButton onClick={() => setTags(tags.filter((t) => t !== tag))} />
          </Tag>
        ))}
      </HStack>
    </Box>
  )
}