Phi / Field

<script setup>
import { Field } from "@dicehub/phi/components/field";
import { Input } from "@dicehub/phi/components/input";
</script>

<template>
  <Field
    id="email"
    label="Email"
    description="We'll never share your email"
  >
    <Input id="email" placeholder="[email protected]" type="email" />
  </Field>
</template>

Installation

Barrel

import { Field } from "@dicehub/phi";

Granular

import { Field } from "@dicehub/phi/components/field";

Examples

Error State

Use string or structured errors to mark the field invalid and render error text.

<script setup>
import { Field } from "@dicehub/phi/components/field";
import { Input } from "@dicehub/phi/components/input";
</script>

<template>
  <Field
    id="password"
    label="Password"
    :error="{ message: 'Password must be at least 8 characters', match: 'tooShort' }"
    required
  >
    <Input id="password" default-value="short" type="password" :minlength="8" />
  </Field>
</template>

Optional Field

Set required to false to show the optional marker and attach a label tooltip.

<script setup>
import { Field } from "@dicehub/phi/components/field";
import { Input } from "@dicehub/phi/components/input";
</script>

<template>
  <Field
    id="phone"
    label="Phone number"
    label-tooltip="Used only for account recovery"
    :required="false"
  >
    <Input id="phone" placeholder="+1 (555) 000-0000" type="tel" />
  </Field>
</template>

Hidden Label

Use hideLabel when another component owns the visible label but Field still owns helper or error text.

<script setup>
import { Field } from "@dicehub/phi/components/field";
import { Input } from "@dicehub/phi/components/input";
</script>

<template>
  <Field
    id="api-key"
    label="API key"
    hide-label
    description="The visible label can be owned by a parent layout."
  >
    <Input id="api-key" aria-label="API key" placeholder="sk_live_..." />
  </Field>
</template>

API Reference

Props

Prop	Type	Default	Description
`id`	`string`	`-`	Field id. Use the same id on the wrapped control.
`label`	`string`	`-`	Label text. Use the label slot for richer content.
`description`	`string`	`-`	Helper text shown when there is no error.
`error`	`string \| { message: string; match?: FieldErrorMatch }`	`-`	Validation error text.
`required`	`boolean`	`-`	Marks the field required. `false` shows the optional marker.
`labelTooltip`	`string`	`-`	Tooltip text displayed beside the label.
`controlFirst`	`boolean`	`false`	Places checkbox or switch controls before the label.
`hideLabel`	`boolean`	`false`	Skips rendering the visible label.
`disabled`	`boolean`	`false`	Marks the field disabled.
`invalid`	`boolean`	`false`	Marks the field invalid even without an error message.
`readOnly`	`boolean`	`false`	Marks the field read-only.
`class / className`	`string \| object \| array`	`-`	Additional classes for the root.

Slots

Slot	Description
`default`	Wrapped form control.
`label`	Custom label content.
`description`	Custom helper text.
`error`	Custom error content.

Validation Error Types

Match
`badInput`
`customError`
`patternMismatch`
`rangeOverflow`
`rangeUnderflow`
`stepMismatch`
`tooLong`
`tooShort`
`typeMismatch`
`valid`
`valueMissing`