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/field'
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/field'
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/field'
</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/field'
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/field'
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/field'
</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/field'
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/field'
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/field'
</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.
Using the Root Provider
The RootProvider
component provides a context for the field. It accepts the value of the useField
hook.
You can leverage it to access the component state and methods from outside the field.
Example not found
Example not found
Example not found
If you're using the
RootProvider
component, you don't need to use theRoot
component.
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element 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. | |
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 | (props: ParentProps<'span'>) => Element 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 | (props: ParentProps<'span'>) => Element 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 | (props: ParentProps<'input'>) => Element 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 | (props: ParentProps<'label'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
RequiredIndicator
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'span'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
fallback | number | boolean | Node | ArrayElement | (string & {}) |
RootProvider
Prop | Default | Type |
---|---|---|
value | Accessor<{ ariaDescribedby: string; ids: { control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: HTMLDivElement | undefined; }; disabled: boolean; ... 10 more ...; getRequiredIndicatorProps: () => { ...; }; }> | |
asChild | (props: ParentProps<'div'>) => Element 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 | (props: ParentProps<'select'>) => Element 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 | (props: ParentProps<'textarea'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |