Input

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

Examples

Default

<script setup>
import { Input } from '@empathyds/vue'
</script>

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

File

Picture

<script setup>
import { Input, Label } from '@empathyds/vue'
</script>

<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

<script setup>
import { Input } from '@empathyds/vue'
</script>

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

With Label

Email

<script setup>
import { Input, Label } from '@empathyds/vue'
</script>

<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>

Props

Input

Prop	Type	Default	Description
modelValue	string | number	-	The controlled value of the input.
defaultValue	string | number	-	The default value of the input.
disabled	boolean	false	Whether the input is disabled.
type	string	"text"	The type of the input.
class	string	-	Custom classes to apply to the input.

Events

Input

Event	Payload	Description
update:modelValue	string | number	Event handler called when the value changes.