Field

A form field component that provides labeling, validation, and helper text for form inputs.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
const model = defineModel()
</script>

<template>
  <Field.Root invalid required>
    <Field.Label>
      Label
      <Field.RequiredIndicator />
    </Field.Label>
    <Field.Input v-model="model" />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface BasicProps extends Field.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Field.Root invalid required {...props}>
      <Field.Label>
        Label
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export interface BasicProps extends Field.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Field.Root invalid required {...props}>
      <Field.Label>
        Label
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<Field.Root invalid required {...props}>
  <Field.Label>
    Label
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Anatomy

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Field.Label />
    <Field.Input />
    <Field.HelperText />
    <Field.ErrorText />
    <Field.RequiredIndicator />
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Field.Root>
      <Field.Label />
      <Field.Input />
      <Field.HelperText />
      <Field.ErrorText />
      <Field.RequiredIndicator />
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Field.Root>
      <Field.Label />
      <Field.Input />
      <Field.HelperText />
      <Field.ErrorText />
      <Field.RequiredIndicator />
    </Field.Root>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
</script>

<Field.Root invalid required>
  <Field.Label>
    Email
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input />
  <Field.HelperText>Enter your email address.</Field.HelperText>
  <Field.ErrorText>This field is required.</Field.ErrorText>
</Field.Root>

Examples

Basic

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
const model = defineModel()
</script>

<template>
  <Field.Root invalid required>
    <Field.Label>
      Label
      <Field.RequiredIndicator />
    </Field.Label>
    <Field.Input v-model="model" />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface BasicProps extends Field.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Field.Root invalid required {...props}>
      <Field.Label>
        Label
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export interface BasicProps extends Field.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Field.Root invalid required {...props}>
      <Field.Label>
        Label
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<Field.Root invalid required {...props}>
  <Field.Label>
    Label
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Input

Use Field with an input element.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Input />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface InputProps extends Field.RootProps {}

export function Input(props: InputProps) {
  return (
    <Field.Root {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export function Input() {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface InputProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  const props: InputProps = $props()
</script>

<Field.Root {...props}>
  <Field.Label>Label</Field.Label>
  <Field.Input />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Input Controlled

Controlled input field example.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { ref } from 'vue'

const model = ref('Input is controlled')
</script>

<template>
  <span>Input text: {{ model }}</span>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Input v-model="model" />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { useState } from 'react'
import { Field } from '@destyler-ui/react'

export interface InputControlledProps extends Field.RootProps {}

export function InputControlled(props: InputControlledProps) {
  const [value, setValue] = useState('Input is controlled')

  return (
    <>
      <span>Input text: {value}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Input value={value} onChange={e => setValue(e.target.value)} />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { createSignal } from 'solid-js'

export interface InputControlledProps extends Field.RootProps {}

export function InputControlled(props: InputControlledProps) {
  const [value, setValue] = createSignal('Input is controlled')

  return (
    <>
      <span>Input text: {value()}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Input value={value()} onInput={event => setValue(event.currentTarget.value)} />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  let value = $state('Input is controlled')
</script>

<span>Input text: {value}</span>
<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Input {value} oninput={(event) => (value = event.currentTarget.value)} />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Select

Use Field with a select element.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Field.Select>
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface SelectProps extends Field.RootProps {}

export function Select(props: SelectProps) {
  return (
    <Field.Root {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </Field.Select>
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export function Select() {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </Field.Select>
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
</script>

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </Field.Select>
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Select Controlled

Controlled select field example.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { ref } from 'vue'

const model = ref('3')
</script>

<template>
  <span>Selected: Option {{ model }}</span>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Select v-model="model">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Field.Select>
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { useState } from 'react'
import { Field } from '@destyler-ui/react'

export interface SelectControlledProps extends Field.RootProps {}

export function SelectControlled(props: SelectControlledProps) {
  const [value, setValue] = useState('3')

  return (
    <>
      <span>Selected: Option {value}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Select value={value} onChange={e => setValue(e.target.value)}>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Field.Select>
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { createSignal } from 'solid-js'

export interface SelectControlledProps extends Field.RootProps {}

export function SelectControlled(props: SelectControlledProps) {
  const [value, setValue] = createSignal('3')

  return (
    <>
      <span>Selected: Option {value()}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Select value={value()} onInput={event => setValue(event.currentTarget.value)}>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Field.Select>
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  let value = $state('3')
</script>

<span>Selected: Option {value}</span>
<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Select {value} onchange={(event) => (value = event.currentTarget.value)}>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </Field.Select>
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Textarea

Use Field with a textarea element.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Textarea />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface TextareaProps extends Field.RootProps {}

export function Textarea(props: TextareaProps) {
  return (
    <Field.Root {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Textarea />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export function Textarea() {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Textarea />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
</script>

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Textarea />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Textarea Autoresize

Textarea that automatically resizes based on content.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Textarea autoresize />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface TextareaAutoresizeProps extends Field.RootProps {}

export function TextareaAutoresize(props: TextareaAutoresizeProps) {
  return (
    <Field.Root {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Textarea autoresize />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export interface TextareaAutoresizeProps extends Field.RootProps {}

export function TextareaAutoresize(props: TextareaAutoresizeProps) {
  return (
    <Field.Root {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Textarea autoresize />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
</script>

<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Textarea autoresize />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Textarea Controlled

Controlled textarea field example.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { ref } from 'vue'

const model = ref('This is some text\nthen more text')
</script>

<template>
  <span>Textarea value: {{ model }}</span>
  <Field.Root>
    <Field.Label>Label</Field.Label>
    <Field.Textarea v-model="model" />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { useState } from 'react'
import { Field } from '@destyler-ui/react'

export interface TextareaControlledProps extends Field.RootProps {}

export function TextareaControlled(props: TextareaControlledProps) {
  const [value, setValue] = useState('This is some text\nthen more text')

  return (
    <>
      <span>Textarea value: {value}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Textarea value={value} onChange={e => setValue(e.target.value)} />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { createSignal } from 'solid-js'

export interface TextareaControlledProps extends Field.RootProps {}

export function TextareaControlled(props: TextareaControlledProps) {
  const [value, setValue] = createSignal('This is some text\nthen more text')

  return (
    <>
      <span>Textarea value: {value()}</span>
      <Field.Root {...props}>
        <Field.Label>Label</Field.Label>
        <Field.Textarea value={value()} onInput={event => setValue(event.currentTarget.value)} />
        <Field.HelperText>Some additional Info</Field.HelperText>
        <Field.ErrorText>Error Info</Field.ErrorText>
      </Field.Root>
    </>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  let value = $state('This is some text\nthen more text')
</script>

<span>Textarea value: {value}</span>
<Field.Root>
  <Field.Label>Label</Field.Label>
  <Field.Textarea {value} oninput={(event) => (value = event.currentTarget.value)} />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Disabled

Display a disabled field.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root data-testid="root" disabled>
    <Field.Label>Label</Field.Label>
    <Field.Input />
    <Field.HelperText>Some additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface DisabledProps extends Field.RootProps {}

export function Disabled(props: DisabledProps) {
  return (
    <Field.Root data-testid="root" disabled {...props}>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export function Disabled() {
  return (
    <Field.Root disabled>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface DisabledProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  const props: DisabledProps = $props()
</script>

<Field.Root data-testid="root" disabled {...props}>
  <Field.Label>Label</Field.Label>
  <Field.Input />
  <Field.HelperText>Some additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Reactive Invalid

Reactively toggle the invalid state.

<script lang="ts" setup>
import { Field } from '@destyler-ui/vue'
import { computed, ref } from 'vue'

const errorMessage = ref('')
const invalid = computed(() => !!errorMessage.value)
</script>

<template>
  <input v-model="errorMessage" />
  <Field.Root :invalid="invalid">
    IsInvalid? {{ invalid }}
    <Field.ErrorText style="color: red">{{ errorMessage }}</Field.ErrorText>
  </Field.Root>
</template>

import { useState } from 'react'
import { Field } from '@destyler-ui/react'

export interface ReactiveInvalidProps extends Field.RootProps {}

export function ReactiveInvalid(props: ReactiveInvalidProps) {
  const [errorMessage, setErrorMessage] = useState('')
  const invalid = !!errorMessage

  return (
    <>
      <input
        value={errorMessage}
        onChange={e => setErrorMessage(e.target.value)}
        placeholder="Type an error message"
      />
      <Field.Root invalid={invalid} {...props}>
        <span>IsInvalid? {String(invalid)}</span>
        <Field.ErrorText style={{ color: 'red' }}>{errorMessage}</Field.ErrorText>
      </Field.Root>
    </>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { createSignal } from 'solid-js'

export interface ReactiveInvalidProps extends Field.RootProps {}

export function ReactiveInvalid(props: ReactiveInvalidProps) {
  const [errorMessage, setErrorMessage] = createSignal('')
  const invalid = () => !!errorMessage()

  return (
    <>
      <input
        aria-label="Error message"
        value={errorMessage()}
        onInput={event => setErrorMessage(event.currentTarget.value)}
        placeholder="Type an error message"
      />
      <Field.Root invalid={invalid()} {...props}>
        <span>IsInvalid? {String(invalid())}</span>
        <Field.ErrorText style={{ color: 'red' }}>{errorMessage()}</Field.ErrorText>
      </Field.Root>
    </>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'

  let errorMessage = $state('')
  const invalid = $derived(Boolean(errorMessage))
</script>

<input bind:value={errorMessage} placeholder="Type an error message" aria-label="Error message" />
<Field.Root {invalid}>
  <span>IsInvalid? {String(invalid)}</span>
  <Field.ErrorText style="color: red">{errorMessage}</Field.ErrorText>
</Field.Root>

Required Indicator

Show a required indicator on the field label.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root required>
    <Field.Label>
      Username
      <Field.RequiredIndicator />
    </Field.Label>
    <Field.Input placeholder="Enter your username" />
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'

export interface RequiredIndicatorProps extends Field.RootProps {}

export function RequiredIndicator(props: RequiredIndicatorProps) {
  return (
    <Field.Root required {...props}>
      <Field.Label>
        Username
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input placeholder="Enter your username" />
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'

export function RequiredIndicator() {
  return (
    <Field.Root required>
      <Field.Label>
        Username
        <Field.RequiredIndicator />
      </Field.Label>
      <Field.Input />
    </Field.Root>
  )
}

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
</script>

<Field.Root required>
  <Field.Label>
    Username
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input placeholder="Enter your username" />
</Field.Root>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Indicates whether the field is disabled.
`id`	—	`string` The id of the field.
`ids`	—	`ElementIds$1` The ids of the field parts.
`invalid`	—	`false \| true` Indicates whether the field is invalid.
`readOnly`	—	`false \| true` Indicates whether the field is read-only.
`required`	—	`false \| true` Indicates whether the field is required.

Context

No serializable props or emits are declared for this part.

ErrorText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HelperText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`modelValue`	—	`any`

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RequiredIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`{ ariaDescribedby: string \| undefined; ids: { control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: Ref<null, null>; }; disabled: boolean \| undefined; ... 10 more ...; getRequiredIndicatorProps: () => HTMLAttributes; }`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Select

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`modelValue`	—	`any`

Textarea

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoresize`	`false`	`false \| true` Whether the textarea should autoresize
`modelValue`	—	`null \| string \| number \| readonly string[]`

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Indicates whether the field is disabled.
`ids`	—	`ElementIds$1` The ids of the field parts.
`invalid`	—	`false \| true` Indicates whether the field is invalid.
`readOnly`	—	`false \| true` Indicates whether the field is read-only.
`required`	—	`false \| true` Indicates whether the field is required.

Context

Prop	Default	Type
`children*`	—	`(context: UseFieldContext) => ReactNode`

ErrorText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HelperText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RequiredIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`fallback`	—	`null \| string \| number \| bigint \| false \| true \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| react82.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react82.ReactPortal \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| null \| undefined>`

RootProvider

Prop	Default	Type
`value*`	—	`{ ariaDescribedby: string \| undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: RefObject<HTMLDivElement \| null>; }; ... 11 more ...; getRequiredIndicatorProps: () => Omit<...>; }`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Select

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Textarea

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoresize`	`false`	`false \| true` Whether the textarea should autoresize

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`	—	`false \| true` Indicates whether the field is disabled.
`ids`	—	`ElementIds` The ids of the field parts.
`invalid`	—	`false \| true` Indicates whether the field is invalid.
`readOnly`	—	`false \| true` Indicates whether the field is read-only.
`required`	—	`false \| true` Indicates whether the field is required.

Context

Prop	Default	Type
`children*`	—	`(context: UseFieldContext) => Element`

ErrorText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HelperText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RequiredIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`fallback`	—	`null \| number \| false \| true \| Node \| solid_js476.JSX.ArrayElement \| (string & {})`

RootProvider

Prop	Default	Type
`value*`	—	`Accessor<{ ariaDescribedby: string \| undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: HTMLDivElement \| undefined; }; ... 12 more ...; getRequiredIndicatorProps: () => { ...; }; }>`
`asChild`	—	`(props: (userProps?: solid_js476.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Select

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.SelectHTMLAttributes<HTMLSelectElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Textarea

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js476.JSX.TextareaHTMLAttributes<HTMLTextAreaElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoresize`	`false`	`false \| true` Whether the textarea should autoresize

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`disabled`	—	`false \| true` Indicates whether the field is disabled.
`id`	—	`string` A stable id for the field. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `Field.Root` does this automatically.
`ids`	—	`import("/home/runner/work/ui/ui/packages/svelte/dist/components/field/hooks/use-field.svelte").ElementIds` The ids of the field parts.
`invalid`	—	`false \| true` Indicates whether the field is invalid.
`readOnly`	—	`false \| true` Indicates whether the field is read-only.
`required`	—	`false \| true` Indicates whether the field is required.

Context

Prop	Default	Type
`render*`	—	`Snippet<[() => { setRootRef: (el: Element \| null) => void; ariaDescribedby: string \| undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; ... 11 more ...; getRequiredIndicatorProps: () => HTMLAttributes<...>; }]>`

ErrorText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

HelperText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

RequiredIndicator

Prop	Default	Type
`asChild`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`
`fallback`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`() => { setRootRef: (el: Element \| null) => void; ariaDescribedby: string \| undefined; ids: { root: string; control: string; label: string; errorText: string; helperText: string; }; ... 11 more ...; getRequiredIndicatorProps: () => HTMLAttributes<...>; }`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Select

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"select">]>`
`children`	—	`Snippet<[]> \| undefined`

Textarea

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"textarea">]>`
`autoresize`	`false`	`false \| true` Whether the textarea should autoresize
`children`	—	`Snippet<[]> \| undefined`