Input

import

import { Input, InputGroup, InputAddon, InputElement } from '@bone-ui/input'

Basic

Loading...

<Input placeholder="user name" />

<Input placeholder="user name" />

LIVE DEMO

Variants

Loading...

<Box spaceY3> <Input variant="outline" placeholder="outline" /> <Input variant="filled" placeholder="filled" /> <Input variant="unstyled" placeholder="unstyled" /> </Box>

<Box spaceY3>
  <Input variant="outline" placeholder="outline" />
  <Input variant="filled" placeholder="filled" />
  <Input variant="unstyled" placeholder="unstyled" />
</Box>

LIVE DEMO

Color scheme

Loading...

<Box spaceY3> <Input placeholder="user name" colorScheme="red400" /> <Input placeholder="user name" colorScheme="blue400" /> <Input placeholder="user name" colorScheme="purple400" /> </Box>

<Box spaceY3>
  <Input placeholder="user name" colorScheme="red400" />
  <Input placeholder="user name" colorScheme="blue400" />
  <Input placeholder="user name" colorScheme="purple400" />
</Box>

LIVE DEMO

Preset Sizes

Loading...

<Box spaceY3> <Input size="sm" placeholder="small" /> <Input size="md" placeholder="medium" /> <Input size="lg" placeholder="large" /> </Box>

<Box spaceY3>
  <Input size="sm" placeholder="small" />
  <Input size="md" placeholder="medium" />
  <Input size="lg" placeholder="large" />
</Box>

LIVE DEMO

Any Sizes

Loading...

<Box spaceY3 w-200> <Input size={20} placeholder="size 20" /> <Input size={30} placeholder="size 30" /> <Input size={50} placeholder="size 40" /> </Box>

<Box spaceY3 w-200>
  <Input size={20} placeholder="size 20" />
  <Input size={30} placeholder="size 30" />
  <Input size={50} placeholder="size 40" />
</Box>

LIVE DEMO

Rounded

Loading...

<Box spaceY3> <Input placeholder="rounded full" roundedFull /> <Input placeholder="rounded full with filled" variant="filled" roundedFull /> <Input placeholder="rounded large" roundedLarge /> <Input placeholder="rounded none" roundedNone /> </Box>

<Box spaceY3>
  <Input placeholder="rounded full" roundedFull />
  <Input placeholder="rounded full with filled" variant="filled" roundedFull />
  <Input placeholder="rounded large" roundedLarge />
  <Input placeholder="rounded none" roundedNone />
</Box>

LIVE DEMO

Customize shadow on focus

Loading...

<Box spaceY3> <Input variant="outline" placeholder="outline" shadowNone--focus /> </Box>

<Box spaceY3>
  <Input variant="outline" placeholder="outline" shadowNone--focus />
</Box>

LIVE DEMO

Disabled

Loading...

<Box spaceY3> <Input disabled placeholder="outline disabled" /> <Input disabled variant="filled" placeholder="filled disabled" /> <Input disabled variant="unstyled" placeholder="filled disabled" /> </Box>

<Box spaceY3>
  <Input disabled placeholder="outline disabled" />
  <Input disabled variant="filled" placeholder="filled disabled" />
  <Input disabled variant="unstyled" placeholder="filled disabled" />
</Box>

LIVE DEMO

Addons

Loading...

<Box spaceY3> <InputGroup> <InputAddon>+007</InputAddon> <Input placeholder="phone" /> </InputGroup> <InputGroup> <Input placeholder="search" /> <InputAddon bgBrand500 borderBrand500> <SearchOutline white /> </InputAddon> </InputGroup> <InputGroup> <InputAddon>https://</InputAddon> <Input placeholder="url" /> <InputAddon>.com</InputAddon> </InputGroup> </Box>

<Box spaceY3>
  <InputGroup>
    <InputAddon>+007</InputAddon>
    <Input placeholder="phone" />
  </InputGroup>

  <InputGroup>
    <Input placeholder="search" />
    <InputAddon bgBrand500 borderBrand500>
      <SearchOutline white />
    </InputAddon>
  </InputGroup>

  <InputGroup>
    <InputAddon>https://</InputAddon>
    <Input placeholder="url" />
    <InputAddon>.com</InputAddon>
  </InputGroup>
</Box>

LIVE DEMO

Inner element

Loading...

<Box spaceY3> <Box spaceY3> <InputGroup> <InputElement> <MailSolid gray500 /> </InputElement> <Input placeholder="email" /> </InputGroup> <InputGroup> <Input placeholder="check" /> <InputElement> <CheckSolid green500 /> </InputElement> </InputGroup> </Box> </Box>

<Box spaceY3>
  <Box spaceY3>
    <InputGroup>
      <InputElement>
        <MailSolid gray500 />
      </InputElement>
      <Input placeholder="email" />
    </InputGroup>

    <InputGroup>
      <Input placeholder="check" />
      <InputElement>
        <CheckSolid green500 />
      </InputElement>
    </InputGroup>
  </Box>
</Box>

LIVE DEMO