Field

#Basic usage

Display name Shown beside your published notes.

field/basic.vue

<script setup lang="ts">
import { Field } from "@bysages/vue";
</script>

<template>
  <Field.Root required>
    <Field.Label>
      Display name
      <Field.RequiredIndicator>*</Field.RequiredIndicator>
    </Field.Label>
    <Field.Input placeholder="How you sign your work" />
    <Field.HelperText>Shown beside your published notes.</Field.HelperText>
  </Field.Root>
</template>

#Props

#ErrorText

A styled part — no props of its own; it takes the anatomy's shared styling.

#HelperText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

Prop	Type	Default	Description
`modelValue`	`InputHTMLAttributes['value']`		—

#Item

Prop	Type	Default	Description
`value`	`string`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#RequiredIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Description
`disabled`	`boolean`	Indicates whether the field is disabled.
`id`	`string`	The id of the field.
`ids`	`ElementIds`	The ids of the field parts.
`invalid`	`boolean`	Indicates whether the field is invalid.
`readOnly`	`boolean`	Indicates whether the field is read-only.
`required`	`boolean`	Indicates whether the field is required.
`target`	`string`	The target field item value the label should point to.

#Select

Prop	Type	Default	Description
`modelValue`	`SelectHTMLAttributes['value']`		—

#Textarea

Prop	Type	Default	Description
`autoresize`	`boolean`	`false`	Whether the textarea should autoresize
`modelValue`	`TextareaHTMLAttributes['value']`		—