Version 2.0

Input

Muestra un diálogo de alerta con un mensaje opcional, y aguardará hasta que el usuario cierre la ventana de diálogo.

Import

Example code
import Input from 'components/@ui/input'

Usage

Example code
<Input type='text' placeholder='Basic input'/>

Variants

Filled

Example code
<Input 
  className='flex-1'
  type='text' 
  variant='filled' 
  placeholder='Outline'
/>

Outline

Example code
<Input 
  className='flex-1' 
  type='text' 
  variant='outline' 
  placeholder='Outline'
/>

Sizes

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Input
    type='text' 
    variant='filled'
    size='sm'
    placeholder='Input sm'
  />
  <Input
    type='text' 
    variant='filled' 
    size='md'
    placeholder='Input md'
  />
  <Input
    type='text' 
    variant='filled'
    size='lg'
    placeholder='Input lg'
  />
  <Input
    type='text' 
    variant='filled'
    size='xl'
    placeholder='Input xl'
  />
</div>

With label

Example code
<div className='flex items-center flex-wrap gap-2'>
  <label htmlFor='inputLabel'>Input label</label>
  <Input
    type='text' 
    id='inputLabel'
    name='inputLabel'
    placeholder='Input with label'
  />
</div>

Validation

Example code
function Example(){
  return (
    <div className='flex items-center flex-wrap gap-2'>
      <label htmlFor='validateSuccess' className='font-medium'>Name</label>
      <Input
        type='text' 
        id='validateSuccess'
        name='validateSuccess'
        placeholder='Input with label'
      />
      <span className='text-sm'>Looks good!</span>
    </div>
  )
}

Basic form

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Input
    type='text' 
    id='inputLabel'
    name='inputLabel'
    placeholder='Searh now'
    className='flex-1'
  />
  <Button>Example</Button>
</div>

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Input
    type='text' 
    id='inputLabel'
    name='inputLabel'
    variant='outline' 
    placeholder='Searh now'
    className='flex-1'
  />
  <Button>Example</Button>
</div>