Input

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

<Input placeholder='Basic usage' />

<Stack spacing={3}>
  <Input placeholder='extra small size' size='xs' />
  <Input placeholder='small size' size='sm' />
  <Input placeholder='medium size' size='md' />
  <Input placeholder='large size' size='lg' />
</Stack>

<Input htmlSize={4} width='auto' />

<Stack spacing={3}>
  <Input variant='outline' placeholder='Outline' />
  <Input variant='filled' placeholder='Filled' />
  <Input variant='flushed' placeholder='Flushed' />
  <Input variant='unstyled' placeholder='Unstyled' />
</Stack>

<Stack spacing={4}>
  <InputGroup>
    <InputLeftAddon children='+234' />
    <Input type='tel' placeholder='phone number' />
  </InputGroup>

  {/* If you add the size prop to `InputGroup`, it'll pass it to all its children. */}
  <InputGroup size='sm'>
    <InputLeftAddon children='https://' />
    <Input placeholder='mysite' />
    <InputRightAddon children='.com' />
  </InputGroup>
</Stack>

<Stack spacing={4}>
  <InputGroup>
    <InputLeftElement
      pointerEvents='none'
      children={<PhoneIcon color='gray.300' />}
    />
    <Input type='tel' placeholder='Phone number' />
  </InputGroup>

  <InputGroup>
    <InputLeftElement
      pointerEvents='none'
      color='gray.300'
      fontSize='1.2em'
      children='$'
    />
    <Input placeholder='Enter amount' />
    <InputRightElement children={<CheckIcon color='green.500' />} />
  </InputGroup>
</Stack>

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

  return (
    <InputGroup size='md'>
      <Input
        pr='4.5rem'
        type={show ? 'text' : 'password'}
        placeholder='Enter password'
      />
      <InputRightElement width='4.5rem'>
        <Button h='1.75rem' size='sm' onClick={handleClick}>
          {show ? 'Hide' : 'Show'}
        </Button>
      </InputRightElement>
    </InputGroup>
  )
}

function Example() {
  const [value, setValue] = React.useState('')
  const handleChange = (event) => setValue(event.target.value)

  return (
    <>
      <Text mb='8px'>Value: {value}</Text>
      <Input
        value={value}
        onChange={handleChange}
        placeholder='Here is a sample placeholder'
        size='sm'
      />
    </>
  )
}

<Stack spacing={3}>
  <Input focusBorderColor='lime' placeholder='Here is a sample placeholder' />
  <Input
    focusBorderColor='pink.400'
    placeholder='Here is a sample placeholder'
  />
  <Input
    isInvalid
    errorBorderColor='red.300'
    placeholder='Here is a sample placeholder'
  />
  <Input
    isInvalid
    errorBorderColor='crimson'
    placeholder='Here is a sample placeholder'
  />
</Stack>

<Stack spacing={3}>
  <Input placeholder='default placeholder' />
  <Input
    placeholder='custom placeholder'
    _placeholder={{ opacity: 1, color: 'gray.500' }}
  />
  <Input
    color='teal'
    placeholder='custom placeholder'
    _placeholder={{ color: 'inherit' }}
  />
  <Input
    color='tomato'
    placeholder='custom placeholder'
    _placeholder={{ opacity: 0.4, color: 'inherit' }}
  />
</Stack>