Empathy DS

Appearance

Input ​

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

Examples ​

Default ​

vue
<Input type="email" placeholder="Email" />

File ​

vue
<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="picture">Picture</Label>
  <Input id="picture" type="file" />
</div>

Disabled ​

vue
<Input disabled type="email" placeholder="Email" />

With Label ​

vue
<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>