GitHub55X

Fieldset

Vue fieldset to group related form controls under a shared legend with consistent spacing.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/fieldset.json

Usage

      
      <script setup lang="ts">
import { Fieldset } from "@/components/ui/fieldset";
</script>

<template>
  <Fieldset.Root>
    <!-- … -->
  </Fieldset.Root>
</template>

Composition

      
      Fieldset.Root
├── Fieldset.Context
├── Fieldset.ErrorText
├── Fieldset.HelperText
├── Fieldset.Legend
├── Fieldset.RootProvider

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.

Field

This example demonstrates how to use the Field component with a standard input field within a Fieldset.

Checkbox

This example shows how to use the Fieldset component with other Ark UI form elements like Checkbox.

Root Provider

An alternative way to control the fieldset is to use the RootProvider component and the useFieldset hook. This way you can access the state and methods from outside the component.

Input with Select

This example shows how to use the Fieldset component with Field.Input and Select to create a interactive phone input component.

API

See Ark UI Fieldset docs for full props and examples.

FieldFile Upload