Components
Input
The bare text input: the field recipe — border, surface, focus halo — on a native control. Standing alone it styles itself from the `invalid` prop; inside a `Field.Root` it consumes the field context, picking up the label id, the described-by wiring and the invalid state for free, which is also the seam the Form validation layer will drive. Disabled rides the native attribute.
#Basic usage
<script setup lang="ts">
import { Input } from "@bysages/vue";
import { ref } from "vue";
const name = ref("");
</script>
<template>
<div class="grid gap-3 w-full">
<Input v-model="name" placeholder="Your name" />
<Input placeholder="Small" size="sm" />
<Input placeholder="Large" size="lg" />
<Input placeholder="Invalid" invalid />
<Input placeholder="Disabled" disabled />
</div>
</template>
<script setup lang="ts">
import { Input } from "@bysages/vue";
import { ref } from "vue";
const phone = ref("");
const date = ref("");
</script>
<template>
<div class="flex w-72 flex-col gap-4">
<Input v-model="phone" mask="(999) 999-9999" placeholder="(000) 000-0000" />
<Input v-model="date" mask="9999-99-99" placeholder="0000-00-00" />
</div>
</template>
#Props
#Input
The bare text input: the field recipe — border, surface, focus halo —
on a native control. Standing alone it styles itself from the invalid
prop; inside a Field.Root it consumes the field context, picking up
the label id, the described-by wiring and the invalid state for free,
which is also the seam the Form validation layer will drive. Disabled
rides the native attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | [String, Number] as PropType<string | number> | undefined | — |
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the control-height ladder for the field. |
invalid | Boolean | false | — |
mask | String | undefined | Entry mask — 9 digit, a letter, * either, anything else is literal. e.g. "999-99-9999", "(999) 999-9999". |