Park UI Logo
GitHub
Components
Fieldset

Fieldset

A component that groups a legend, helper, and error text, ensuring accessibility.

NotifiationsGet notifcations when your are not online
When someone posts a comment
When someone applies for a job
import { OctagonAlertIcon } from 'lucide-react'
import { Field } from '~/components/ui/field'
import { Fieldset } from '~/components/ui/fieldset'
import { Icon } from '~/components/ui/icon'
import { Switch } from '~/components/ui/switch'

export const Demo = (props: Fieldset.RootProps) => {
  return (
    <Fieldset.Root {...props}>
      <Fieldset.Legend>Notifiations</Fieldset.Legend>
      <Fieldset.HelperText>Get notifcations when your are not online</Fieldset.HelperText>
      <Fieldset.Control>
        <Field.Root>
          <Switch size="sm" defaultChecked>
            Comments
          </Switch>
          <Field.HelperText>When someone posts a comment</Field.HelperText>
        </Field.Root>
        <Field.Root>
          <Switch size="sm" defaultChecked>
            Candidates
          </Switch>
          <Field.HelperText>When someone applies for a job</Field.HelperText>
        </Field.Root>
      </Fieldset.Control>
      <Fieldset.ErrorText>
        <Icon size="sm">
          <OctagonAlertIcon />
        </Icon>
        Something went wrong
      </Fieldset.ErrorText>
    </Fieldset.Root>
  )
}

Usage

import { Fieldset } from '~/components/ui/fieldset'

Examples

Invalid

Use the invalid prop to indicate that the fieldset is invalid.

NotifiationsGet notifcations when your are not online
When someone posts a comment
Something went wrong
<Fieldset.Root invalid>
  <Fieldset.Legend>Notifiations</Fieldset.Legend>
  <Fieldset.HelperText>Get notifcations when your are not online</Fieldset.HelperText>
  <Fieldset.Control>
    <Field.Root>
      <Switch size="sm">Comments</Switch>
      <Field.HelperText>When someone posts a comment</Field.HelperText>
    </Field.Root>
  </Fieldset.Control>
  <Fieldset.ErrorText>
    <Icon size="sm">
      <OctagonAlertIcon />
    </Icon>
    Something went wrong
  </Fieldset.ErrorText>
</Fieldset.Root>

Installation

npx @park-ui/cli components add fieldset