Components / Forms

Input

A text field that keeps native input behavior and supports prefix and suffix slots.

Preview

Use cases

Account details

Collect an email address with native email validation and autocomplete.

Structured identifiers

Place a fixed prefix beside an editable workspace name without putting the prefix in its value.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Input from './components/ui/input/Input.vue'
import Label from './components/ui/label/Label.vue'
const email = ref('')
</script>

<template>
  <Label for="email">Email</Label>
  <Input id="email" v-model="email" type="email" required />
</template>

More examples

Email address

Use native input attributes for validation and autofill.

Email address

<script setup lang="ts">
import { ref } from 'vue'
import Input from './components/ui/input/Input.vue'
const email = ref('')
</script>
<template>
  <label for="billing-email">Billing email</label>
  <Input id="billing-email" v-model="email" type="email" name="email" autocomplete="email" required />
</template>

Workspace URL

Keep the stored name separate from fixed context.

Workspace URL

<script setup lang="ts">
import { ref } from 'vue'
import Input from './components/ui/input/Input.vue'
const workspace = ref('')
</script>
<template>
  <label for="workspace">Workspace name</label>
  <Input id="workspace" v-model="workspace" name="workspace">
    <template #prefix>weini.app/</template>
  </Input>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Input
Name	Type	Default or requirement
`v-model`	string	undefined
`size`	sm \| md \| lg	md
`invalid`	boolean	false
`prefix / suffix`	slot	empty

Use a visible label. Native attributes such as type, name, required, and autocomplete pass through.

Implementation notes

The prefix and suffix are presentation; neither becomes part of the submitted input value.
Set width on a surrounding layout. Native attributes such as pattern, name, and autocomplete reach the input.

Accessibility and localization

Associate a visible label and connect validation text with aria-describedby. Do not rely on an adornment as the only accessible unit or name.