Input

Displays a form input field or a component that looks like an input field.

Installation

uvx shadcn_django@latest add input

Usage

<c-input type='email' placeholder='Email' />

Examples

Default

<c-input type='email' placeholder='Email' />

File

<c-input type='file' id='picture' />

Disabled

<c-input type='email' placeholder='Email' disabled />

With Label

Email

<div class='grid w-full max-w-sm items-center gap-1.5'>
    <c-label for='email'>Email</c-label>
    <c-input type='email' placeholder='you@example.com' />
</div>

With Button

<div class='flex w-full max-w-sm items-center space-x-2'>
    <c-input type='email' placeholder='you@example.com' />
    <c-button type='submit'>Subscribe</c-button>
</div>