Fieldset

A component for grouping related form fields with a legend and shared validation.

Show Code

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

<template>
  <Fieldset.Root invalid>
    <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>

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

export interface BasicProps extends Fieldset.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Fieldset.Root invalid {...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 { Fieldset } from '@destyler-ui/solid/fieldset'

export function 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 module lang="ts">
  import type { FieldsetRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends FieldsetRootProps {}
</script>

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

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

<Fieldset.Root invalid {...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>

Anatomy

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

<template>
  <Fieldset.Root>
    <Fieldset.Legend />
    <Fieldset.HelperText />
    <Fieldset.ErrorText />
  </Fieldset.Root>
</template>

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

export default function Basic() {
  return (
    <Fieldset.Root>
      <Fieldset.Legend />
      <Fieldset.HelperText />
      <Fieldset.ErrorText />
    </Fieldset.Root>
  )
}

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

export default function Basic() {
  return (
    <Fieldset.Root>
      <Fieldset.Legend />
      <Fieldset.HelperText />
      <Fieldset.ErrorText />
    </Fieldset.Root>
  )
}

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

<Fieldset.Root>
  <Fieldset.Legend>Contact details</Fieldset.Legend>
  <Fieldset.HelperText>All fields are required.</Fieldset.HelperText>
  <Field.Root>
    <Field.Label>Email</Field.Label>
    <Field.Input />
  </Field.Root>
  <Fieldset.ErrorText>Please check the form.</Fieldset.ErrorText>
</Fieldset.Root>

Examples

Basic

Show Code

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

<template>
  <Fieldset.Root invalid>
    <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>

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

export interface BasicProps extends Fieldset.RootProps {}

export function Basic(props: BasicProps) {
  return (
    <Fieldset.Root invalid {...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 { Fieldset } from '@destyler-ui/solid/fieldset'

export function 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 module lang="ts">
  import type { FieldsetRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends FieldsetRootProps {}
</script>

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

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

<Fieldset.Root invalid {...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>

With Checkbox

Nest a checkbox inside a field within a fieldset.

Show Code

<script setup lang="ts">
import { Fieldset } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue';
import { Checkbox } from '@destyler-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 Helper Text</Field.HelperText>
      <Field.ErrorText>Field Error Text</Field.ErrorText>
    </Field.Root>
  </Fieldset.Root>
</template>

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

export interface WithCheckboxProps extends Fieldset.RootProps {}

export function WithCheckbox(props: WithCheckboxProps) {
  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>Checkbox</Checkbox.Label>
          <Checkbox.Control>
            <Checkbox.Indicator>✔️</Checkbox.Indicator>
          </Checkbox.Control>
          <Checkbox.HiddenInput />
        </Checkbox.Root>
        <Field.HelperText>Field Helper Text</Field.HelperText>
        <Field.ErrorText>Field Error Text</Field.ErrorText>
      </Field.Root>
    </Fieldset.Root>
  )
}

import { Checkbox } from '@destyler-ui/solid/checkbox'
import { Field } from '@destyler-ui/solid/field'
import { Fieldset } from '@destyler-ui/solid/fieldset'

export function 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 module lang="ts">
  import type { FieldsetRootProps } from '@destyler-ui/svelte'

  export interface WithCheckboxProps extends FieldsetRootProps {}
</script>

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

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

<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>Checkbox</Checkbox.Label>
      <Checkbox.Control>
        <Checkbox.Indicator>✔️</Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Field.HelperText>Field Helper Text</Field.HelperText>
    <Field.ErrorText>Field Error Text</Field.ErrorText>
  </Field.Root>
</Fieldset.Root>

With Field

Nest field components within a fieldset.

Show Code

<script setup lang="ts">
import { Fieldset } from '@destyler-ui/vue'
import { Field } from '@destyler-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>

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

export interface WithFieldProps extends Fieldset.RootProps {}

export function WithField(props: WithFieldProps) {
  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 } from '@destyler-ui/solid/field'
import { Fieldset } from '@destyler-ui/solid/fieldset'

export function 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 module lang="ts">
  import type { FieldsetRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends FieldsetRootProps {}
</script>

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

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

<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>

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 | "true" | "false" Indicates whether the fieldset is disabled.
id	—	string The id of the fieldset.
invalid	—	false | true Indicates whether the fieldset is invalid.

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.

Legend

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*	—	{ refs: { rootRef: Ref<null, null>; }; disabled: boolean | "true" | "false" | undefined; invalid: boolean | undefined; getRootProps: () => FieldsetHTMLAttributes; getLegendProps: () => { ...; }; getHelperTextProps: () => { ...; }; getErrorTextProps: () => HTMLAttributes; }
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
invalid	—	false | true Indicates whether the fieldset is invalid.

Context

Prop	Default	Type
children*	—	(context: UseFieldsetContext) => 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.

Legend

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*	—	{ refs: { rootRef: RefObject<HTMLFieldSetElement | null>; }; disabled: boolean; invalid: boolean; getRootProps: () => Omit<DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">; getLegendProps: () => Omit<...>; getHelperTextProps: () => Omit<...>; getErrorTextProps: () => Omit<....
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js479.JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
invalid	—	false | true Indicates whether the fieldset is invalid.

Context

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

ErrorText

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js479.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_js479.JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Legend

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

RootProvider

Prop	Default	Type
value*	—	Accessor<{ refs: { rootRef: HTMLFieldSetElement | undefined; }; setRootRef: Setter<HTMLFieldSetElement | undefined>; disabled: boolean; ... 4 more ...; getErrorTextProps: () => { ...; }; }>
asChild	—	(props: (userProps?: solid_js479.JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"fieldset">]>
children	—	Snippet<[]> | undefined
disabled	—	false | true Indicates whether the fieldset is disabled.
id	—	string A stable id for the fieldset. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `Fieldset.Root` does this automatically.
invalid	—	false | true Indicates whether the fieldset is invalid.

Context

Prop	Default	Type
render*	—	Snippet<[() => { setRootRef: (el: Element | null) => void; disabled: boolean; invalid: boolean; getRootProps: () => HTMLFieldsetAttributes; getLegendProps: () => HTMLAttributes<...>; getHelperTextProps: () => HTMLAttributes<...>; getErrorTextProps: () => 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

Legend

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

RootProvider

Prop	Default	Type
value*	—	() => { setRootRef: (el: Element | null) => void; disabled: boolean; invalid: boolean; getRootProps: () => HTMLFieldsetAttributes; getLegendProps: () => HTMLAttributes<...>; getHelperTextProps: () => HTMLAttributes<...>; getErrorTextProps: () => HTMLAttributes<...>; }
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"fieldset">]>
children	—	Snippet<[]> | undefined