Preview

Installation

npx sigma-ui@latest add input

Usage

<script setup lang="ts">
import { Input } from '@/components/ui/input';
</script>

<template>
  <Input
    v-model="email"
    type="email"
    placeholder="Email"
  />
</template>

v-model binds a string or a number. Every native input attribute, such as type, disabled, and placeholder, is passed through to the <input>.

Examples

Basic

File

Disabled

With Label

With Button

With Icon

Form

API Reference

Input

Props

Prop	Type	Default
modelValue Current value of the input; use with v-model.	string | number	-

Events

Event	Payload
update:modelValue Emitted when the user changes the value.	unknown[]

Accessibility

Renders a native <input>. Pair it with a <Label> (or aria-label) so the field has an accessible name.

Key	Description
Tab	Moves focus to the input.
Shift + Tab	Moves focus to the previous focusable element.