Fieldset
A set of form controls optionally grouped under a common name.
Examples
The Fieldset
component provides contexts such as invalid
and disabled
for form elements.
While most Ark UI components natively support these contexts, you can also use the Field
component with standard HTML form elements.
Basic Usage
Learn how to use the Fieldset
component in your project. Let's take a look at the most basic
example:
import { Fieldset } from '@ark-ui/react'
export const Basic = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Helper text</Fieldset.HelperText>
<Fieldset.ErrorText>Error text</Fieldset.ErrorText>
</Fieldset.Root>
)
}
import { Fieldset } from '@ark-ui/solid'
export const Basic = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Helper text</Fieldset.HelperText>
<Fieldset.ErrorText>Error text</Fieldset.ErrorText>
</Fieldset.Root>
)
}
<script setup lang="ts">
import { Fieldset } from '@ark-ui/vue'
</script>
<template>
<Fieldset.Root>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Helper text</Fieldset.HelperText>
<Fieldset.ErrorText>Error text</Fieldset.ErrorText>
</Fieldset.Root>
</template>
Fieldset with Fields
This example demonstrates how to use the Field
component with a standard input field within a Fieldset
.
import { Field, Fieldset } from '@ark-ui/react'
export const WithField = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Field.Label>Label</Field.Label>
<Field.Input />
<Field.HelperText>Field Helper Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.Root>
)
}
import { Field, Fieldset } from '@ark-ui/solid'
export const WithField = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Field.Label>Label</Field.Label>
<Field.Input />
<Field.HelperText>Field Helper Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.Root>
)
}
<script setup lang="ts">
import { Field, Fieldset } from '@ark-ui/vue'
</script>
<template>
<Fieldset.Root>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Field.Label>Label</Field.Label>
<Field.Input />
<Field.HelperText>Field Helper Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.Root>
</template>
Fieldset with other Form Elements
This example shows how to use the Fieldset
component with other Ark UI form elements like Checkbox
.
import { Checkbox, Field, Fieldset } from '@ark-ui/react'
export const WithCheckbox = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Checkbox.Root>
<Checkbox.Label>Label</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>✔️</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Field Heler Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.Root>
)
}
import { Checkbox, Field, Fieldset } from '@ark-ui/solid'
export const WithCheckbox = (props: Fieldset.RootProps) => {
return (
<Fieldset.Root {...props}>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Checkbox.Root>
<Checkbox.Label>Label</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>✔️</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Field Heler Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.Root>
)
}
<script setup lang="ts">
import { Checkbox, Field, Fieldset } from '@ark-ui/vue'
</script>
<template>
<Fieldset.Root>
<Fieldset.Legend>Legend</Fieldset.Legend>
<Fieldset.HelperText>Fieldset Helper Text</Fieldset.HelperText>
<Fieldset.ErrorText>Fieldset Error Text</Fieldset.ErrorText>
<Field.Root>
<Checkbox.Root>
<Checkbox.Label>Checkbox</Checkbox.Label>
<Checkbox.Control>
<Checkbox.Indicator>✔️</Checkbox.Indicator>
</Checkbox.Control>
<Checkbox.HiddenInput />
</Checkbox.Root>
<Field.HelperText>Field Heler Text</Field.HelperText>
<Field.ErrorText>Field Error Text</Field.ErrorText>
</Field.Root>
</Fieldset.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 | 'true' | 'false' Indicates whether the fieldset is disabled. | |
id | string The id of the fieldset. | |
invalid | boolean Indicates whether the fieldset is invalid. |
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. |
Legend
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 | { refs: { rootRef: Ref<null>; }; disabled: boolean | "true" | "false" | undefined; invalid: boolean | undefined; getRootProps: () => FieldsetHTMLAttributes; getLegendProps: () => { ...; }; getHelperTextProps: () => { ...; }; 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. |