Field

<Field.Root id="contact-email">
  <Field.Label>Email address</Field.Label>
  <Field.Input type="email" placeholder="[email protected]" />
  <Field.HelperText>We will only use this address for account messages.</Field.HelperText>
</Field.Root>

<script setup>
import { ref } from "vue";
import { Field } from "@dicehub/kappa/components/field";

const notes = ref("Bring the accessibility report to the review.");
</script>

<template>
  <Field.Root id="review-notes">
    <Field.Label>Review notes</Field.Label>
    <Field.Textarea v-model="notes" autoresize :rows="3" />
    <Field.HelperText>{{ notes.length }}/200 characters</Field.HelperText>
  </Field.Root>
</template>

<Field.Root id="timezone">
  <Field.Label>Timezone</Field.Label>
  <Field.Select v-model="timezone">
    <option value="Europe/Berlin">Berlin (UTC+2)</option>
    <option value="America/New_York">New York (UTC-4)</option>
    <option value="Asia/Singapore">Singapore (UTC+8)</option>
  </Field.Select>
  <Field.HelperText>Dates and reminders use this timezone.</Field.HelperText>
</Field.Root>

<script setup>
import { computed, ref } from "vue";
import { Field } from "@dicehub/kappa/components/field";

const password = ref("short");
const errors = computed(() => {
  const messages = [];
  if (password.value.length < 8) messages.push("Use at least 8 characters.");
  if (!/[A-Z]/.test(password.value)) messages.push("Add one uppercase letter.");
  if (!/\d/.test(password.value)) messages.push("Add one number.");
  return messages;
});
</script>

<template>
  <Field.Root id="password" required :invalid="errors.length > 0">
    <Field.Label>Password <Field.RequiredIndicator /></Field.Label>
    <Field.Input v-model="password" type="password" />
    <Field.HelperText>Use a unique password for this account.</Field.HelperText>
    <Field.ErrorText>
      <ul><li v-for="error in errors" :key="error">{{ error }}</li></ul>
    </Field.ErrorText>
  </Field.Root>
</template>

<Field.Root id="contact-name" required>
  <Field.Label>Contact name <Field.RequiredIndicator /></Field.Label>
  <Field.Input />
</Field.Root>

<Field.Root id="company-name">
  <Field.Label>
    Company
    <Field.RequiredIndicator>
      <template #fallback><span>(optional)</span></template>
    </Field.RequiredIndicator>
  </Field.Label>
  <Field.Input />
</Field.Root>

<script setup>
import { Checkbox } from "@dicehub/kappa/components/checkbox";
import { Field } from "@dicehub/kappa/components/field";
</script>

<template>
  <Field.Root id="product-updates">
    <Checkbox.Root default-checked name="product-updates">
      <Checkbox.Control />
      <Field.Label as-child>
        <Checkbox.Label>Send me product updates</Checkbox.Label>
      </Field.Label>
    </Checkbox.Root>
    <Field.HelperText>One short email each month.</Field.HelperText>
  </Field.Root>
</template>

<Field.Root id="monthly-budget" target="amount">
  <Field.Label>Monthly budget</Field.Label>
  <div class="budget-control">
    <Field.Item value="currency">
      <Field.Label class="visually-hidden">Currency</Field.Label>
      <Field.Select v-model="currency" aria-label="Currency">
        <option>EUR</option>
        <option>USD</option>
        <option>GBP</option>
      </Field.Select>
    </Field.Item>
    <Field.Item value="amount">
      <Field.Input v-model="budget" inputmode="decimal" />
    </Field.Item>
  </div>
  <Field.HelperText>Set the limit used for monthly alerts.</Field.HelperText>
</Field.Root>

<Field.Root id="account-alias" orientation="horizontal">
  <Field.Label>Account alias</Field.Label>
  <Field.Input />
  <Field.HelperText>Shown in account menus.</Field.HelperText>
</Field.Root>

<Field.Root id="language" orientation="responsive">
  <Field.Label>Language</Field.Label>
  <Field.Select>
    <option>English</option>
    <option>Deutsch</option>
  </Field.Select>
  <Field.HelperText>Stacks below 40 rem.</Field.HelperText>
</Field.Root>

<Field.Root id="customer-id" disabled>
  <Field.Label>Customer ID</Field.Label>
  <Field.Input model-value="CUS-40218" />
  <Field.HelperText>Disabled while the account is pending.</Field.HelperText>
</Field.Root>

<Field.Root id="account-owner" read-only>
  <Field.Label>Account owner</Field.Label>
  <Field.Input model-value="Avery Chen" />
  <Field.HelperText>Contact support to change the owner.</Field.HelperText>
</Field.Root>