Field
Provides a flexible container for form inputs, labels, and helper text.
Examples
The Field
component provides contexts such as invalid
, disabled
, required
, and readOnly
for form elements.
While most Ark UI components natively support these contexts, you can also use the Field
component with standard HTML form elements.
Input
This example shows how to use the Field
component with a standard input field.
import { Field } from '@ark-ui/react'
export const 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>
)
}
import { Field } from '@ark-ui/solid'
export const 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 setup lang="ts">
import { Field } from '@ark-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>
Textarea
This example illustrates how to use the Field
component with a textarea element.
import { Field } from '@ark-ui/react'
export const 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>
)
}
import { Field } from '@ark-ui/solid'
export const 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 setup lang="ts">
import { Field } from '@ark-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>
Select
This example demonstrates how to integrate the Field
component with a select dropdown.
import { Field } from '@ark-ui/react'
export const 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>
)
}
import { Field } from '@ark-ui/solid'
export const 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 setup lang="ts">
import { Field } from '@ark-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>
Using Ark Components
This example demonstrates how to integrate the Field
and Checkbox
components.
For more examples of using the Field
component with various Ark UI elements, refer to their respective documentation.
import { CheckIcon, MinusIcon } from 'lucide-react'
import { Checkbox, Field } from '@ark-ui/react'
export const WithField = (props: Field.RootProps) => (
<Field.Root {...props}>
<Checkbox.Root>
<Checkbox.Label>Label</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>
<CheckIcon />
</Checkbox.Indicator>
<Checkbox.Indicator indeterminate>
<MinusIcon />
</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
)
import { CheckIcon, MinusIcon } from 'lucide-solid'
import { Checkbox, Field } from '@ark-ui/solid'
export const WithField = (props: Field.RootProps) => (
<Field.Root {...props}>
<Checkbox.Root>
<Checkbox.Label>Label</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>
<CheckIcon />
</Checkbox.Indicator>
<Checkbox.Indicator indeterminate>
<MinusIcon />
</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
)
<script setup lang="ts">
import { Checkbox, Field } from '@ark-ui/vue'
import { CheckIcon } from 'lucide-vue-next'
</script>
<template>
<Field.Root>
<Checkbox.Root>
<Checkbox.Label>Label</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>
<CheckIcon />
</Checkbox.Indicator>
<Checkbox.Indicator indeterminate>
<MinusIcon />
</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
</template>
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
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. |
ErrorText
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
HelperText
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Input
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Label
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
RootProvider
Prop | Default | Type |
---|---|---|
value | { ariaDescribedby: string; ids: { control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: Ref<null>; }; disabled: boolean | undefined; invalid: boolean | undefined; ... 8 more ...; getErrorTextProps: () => HTMLAttributes; } | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Select
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Textarea
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |