Input

Variant

Default

Preview

Code

HTML

Code

JSX/TSX

<input class="input success" placeholder="default input" />

<input className='input success'
  placeholder='default input' />

Solid

Preview

Code

HTML

Code

JSX/TSX

<input class="input solid success" placeholder="solid input" />

<input className='input solid success'
  placeholder='solid input' />

Outline

Preview

Code

HTML

Code

JSX/TSX

<input class="input outline success" placeholder="outline input" />

<input className='input outline success'
  placeholder='outline input' />

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<input class="input success xs" placeholder="xs" />
	<input class="input success sm" placeholder="sm" />
	<input class="input success md" placeholder="md" />
	<input class="input success lg" placeholder="lg" />
	<input class="input success xl" placeholder="xl" />
</div>

<div className='grid gap-4'>
  <input className='input success xs'
    placeholder='xs' />
  <input className='input success sm'
    placeholder='sm' />
  <input className='input success md'
    placeholder='md' />
  <input className='input success lg'
    placeholder='lg' />
  <input className='input success xl'
    placeholder='xl' />
</div>

Pill

Preview

Code

HTML

Code

JSX/TSX

<input class="input success pill" placeholder="pill" />

<input className='input success pill'
  placeholder='pill' />

Disabled

Preview

Code

HTML

Code

JSX/TSX

<input class="input success" disabled="{true}" placeholder="disabled" />

<input className='input success'
  disabled={true}
  placeholder='disabled' />

Textarea

Preview

Code

HTML

Code

JSX/TSX

<textarea class="input success" placeholder="textarea" />

<textarea className='input success'
  placeholder='textarea' />

Dropdown Link