Fieldset

A semantic group of related form controls named by a legend.

ブラウザー: Chrome 123+Firefox 121+Safari 17.5+
ティア: 0
強制レイアウトの上限: 0 ms
axe の上限: 0
SSR 対応: はい
公開された契約: テストハーネス

プレイグラウンド

Fieldset / Legend

デフォルト

Contact preferencesメールText message

React

CSS

Tailwind

import { Checkbox, Fieldset, FieldsetLegend } from "@gunkin/uiify";

export default function Example() {
  return (
    <Fieldset className="">
      <FieldsetLegend className="">Contact preferences</FieldsetLegend>
      <Checkbox className="" id="contact-email" label="Email" name="contact" value="email" />
      <Checkbox className="" id="contact-sms" label="Text message" name="contact" value="sms" />
    </Fieldset>
  );
}

@layer components {
  [data-uiify-fieldset][data-part="root"] {
    display: grid;
    gap: var(--space-md);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  [data-uiify-fieldset] > [data-part="legend"] {
    padding: 0;
    color: var(--foreground);
    font-weight: var(--weight-medium);
  }
}

import { Checkbox, Fieldset, FieldsetLegend } from "@gunkin/uiify";

export default function Example() {
  return (
    <Fieldset
      className="
        data-[part=root]:grid data-[part=root]:gap-md data-[part=root]:[min-inline-size:0] data-[part=root]:m-0
        data-[part=root]:p-0 data-[part=root]:border-0 data-[part=root]:border-current data-[part=root]:border-none
        [&>[data-part=legend]]:p-0 [&>[data-part=legend]]:text-foreground
        [&>[data-part=legend]]:font-[number:var(--weight-medium)]
      "
    >
      <FieldsetLegend className="p-0 text-foreground font-[number:var(--weight-medium)]">
        Contact preferences
      </FieldsetLegend>
      <Checkbox
        className={
          "focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--" +
          "ring)_16%,_transparent)] [&>input]:appearance-none [&>input]:[inline-size:1.25rem] [&>input]:[block-size:" +
          "1.25rem] [&>input]:m-0 [&>input]:border-[length:var(--border-width)] [&>input]:border-solid [&>input]:bor" +
          "der-input [&>input]:bg-card [&>input]:inline-grid [&>input]:place-content-center [&>input]:cursor-pointer" +
          " [&>input]:[transition:var(--transition-colors)] [--uiify-checkbox-mask:url(\"data:image/svg+xml,%3Csvg%20" +
          "xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M3.6%208.6l3%203L" +
          "12.4%204.8%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27" +
          "%20stroke-linejoin=%27round%27/%3E%3C/svg%3E\")_center_/_100%_100%_no-repeat] inline-flex items-center gap" +
          "-sm cursor-pointer select-none text-foreground text-sm [line-height:var(--leading-normal)] [&>input]:roun" +
          "ded-xs [&>input]:[corner-shape:squircle] [&>input:checked]:border-primary [&>input:checked]:bg-primary [&" +
          ">input[data-state=checked]]:border-primary [&>input[data-state=checked]]:bg-primary [&>input::before]:con" +
          "tent-[''] [&>input::before]:[inline-size:1rem] [&>input::before]:[block-size:1rem] [&>input::before]:[tra" +
          "nsform:scale(0)] [&>input::before]:[transition:transform_var(--duration-fast)_var(--ease-out)] [&>input::" +
          "before]:bg-primary-foreground [&>input::before]:[mask:var(--uiify-checkbox-mask)] [&>input:checked::befor" +
          "e]:[transform:scale(1)] [&>input[data-state=checked]::before]:[transform:scale(1)] [&>input:indeterminate" +
          "]:border-primary [&>input:indeterminate]:bg-primary [&>input[data-state=indeterminate]]:border-primary [&" +
          ">input[data-state=indeterminate]]:bg-primary [&>input:indeterminate::before]:[transform:scale(1)] [&>inpu" +
          "t:indeterminate::before]:[mask:none] [&>input:indeterminate::before]:[clip-path:inset(42%_12%_42%_12%)] [" +
          "&>input[data-state=indeterminate]::before]:[transform:scale(1)] [&>input[data-state=indeterminate]::befor" +
          "e]:[mask:none] [&>input[data-state=indeterminate]::before]:[clip-path:inset(42%_12%_42%_12%)] [&>input:di" +
          "sabled]:opacity-50 [&>input:disabled]:cursor-not-allowed [&>input[data-disabled]]:opacity-50 [&>input[dat" +
          "a-disabled]]:cursor-not-allowed [&:has(>input:disabled)]:opacity-50 [&:has(>input:disabled)]:cursor-not-a" +
          "llowed"
        }
        id="contact-email"
        label="Email"
        name="contact"
        value="email"
      />
      <Checkbox
        className={
          "focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--" +
          "ring)_16%,_transparent)] [&>input]:appearance-none [&>input]:[inline-size:1.25rem] [&>input]:[block-size:" +
          "1.25rem] [&>input]:m-0 [&>input]:border-[length:var(--border-width)] [&>input]:border-solid [&>input]:bor" +
          "der-input [&>input]:bg-card [&>input]:inline-grid [&>input]:place-content-center [&>input]:cursor-pointer" +
          " [&>input]:[transition:var(--transition-colors)] [--uiify-checkbox-mask:url(\"data:image/svg+xml,%3Csvg%20" +
          "xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M3.6%208.6l3%203L" +
          "12.4%204.8%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27" +
          "%20stroke-linejoin=%27round%27/%3E%3C/svg%3E\")_center_/_100%_100%_no-repeat] inline-flex items-center gap" +
          "-sm cursor-pointer select-none text-foreground text-sm [line-height:var(--leading-normal)] [&>input]:roun" +
          "ded-xs [&>input]:[corner-shape:squircle] [&>input:checked]:border-primary [&>input:checked]:bg-primary [&" +
          ">input[data-state=checked]]:border-primary [&>input[data-state=checked]]:bg-primary [&>input::before]:con" +
          "tent-[''] [&>input::before]:[inline-size:1rem] [&>input::before]:[block-size:1rem] [&>input::before]:[tra" +
          "nsform:scale(0)] [&>input::before]:[transition:transform_var(--duration-fast)_var(--ease-out)] [&>input::" +
          "before]:bg-primary-foreground [&>input::before]:[mask:var(--uiify-checkbox-mask)] [&>input:checked::befor" +
          "e]:[transform:scale(1)] [&>input[data-state=checked]::before]:[transform:scale(1)] [&>input:indeterminate" +
          "]:border-primary [&>input:indeterminate]:bg-primary [&>input[data-state=indeterminate]]:border-primary [&" +
          ">input[data-state=indeterminate]]:bg-primary [&>input:indeterminate::before]:[transform:scale(1)] [&>inpu" +
          "t:indeterminate::before]:[mask:none] [&>input:indeterminate::before]:[clip-path:inset(42%_12%_42%_12%)] [" +
          "&>input[data-state=indeterminate]::before]:[transform:scale(1)] [&>input[data-state=indeterminate]::befor" +
          "e]:[mask:none] [&>input[data-state=indeterminate]::before]:[clip-path:inset(42%_12%_42%_12%)] [&>input:di" +
          "sabled]:opacity-50 [&>input:disabled]:cursor-not-allowed [&>input[data-disabled]]:opacity-50 [&>input[dat" +
          "a-disabled]]:cursor-not-allowed [&:has(>input:disabled)]:opacity-50 [&:has(>input:disabled)]:cursor-not-a" +
          "llowed"
        }
        id="contact-sms"
        label="Text message"
        name="contact"
        value="sms"
      />
    </Fieldset>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('data-[part=root]:grid data-[part=root]:gap-md data-[part=root]:[min-inline-size:0] data-[part=root]:m-0 data-[part=root]:p-0 data-[part=root]:border-0 data-[part=root]:border-current data-[part=root]:border-none [&>[data-part=legend]]:p-0 [&>[data-part=legend]]:text-foreground [&>[data-part=legend]]:font-[number:var(--weight-medium)] p-0 text-foreground font-[number:var(--weight-medium)] focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&>input]:appearance-none [&>input]:[inline-size:1.25rem] [&>input]:[block-size:1.25rem] [&>input]:m-0 [&>input]:border-[length:var(--border-width)] [&>input]:border-solid [&>input]:border-input [&>input]:bg-card [&>input]:inline-grid [&>input]:place-content-center [&>input]:cursor-pointer [&>input]:[transition:var(--transition-colors)] [--uiify-checkbox-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M3.6%208.6l3%203L12.4%204.8%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E")_center_/_100%_100%_no-repeat] inline-flex items-center gap-sm cursor-pointer select-none text-sm [line-height:var(--leading-normal)] [&>input]:rounded-xs [&>input]:[corner-shape:squircle] [&>input:checked]:border-primary [&>input:checked]:bg-primary [&>input[data-state=checked]]:border-primary [&>input[data-state=checked]]:bg-primary [&>input::before]:[inline-size:1rem] [&>input::before]:[block-size:1rem] [&>input::before]:[transform:scale(0)] [&>input::before]:[transition:transform_var(--duration-fast)_var(--ease-out)] [&>input::before]:bg-primary-foreground [&>input::before]:[mask:var(--uiify-checkbox-mask)] [&>input:checked::before]:[transform:scale(1)] [&>input[data-state=checked]::before]:[transform:scale(1)] [&>input:indeterminate]:border-primary [&>input:indeterminate]:bg-primary [&>input[data-state=indeterminate]]:border-primary [&>input[data-state=indeterminate]]:bg-primary [&>input:indeterminate::before]:[transform:scale(1)] [&>input:indeterminate::before]:[mask:none] [&>input:indeterminate::before]:[clip-path:inset(42%_12%_42%_12%)] [&>input[data-state=indeterminate]::before]:[transform:scale(1)] [&>input[data-state=indeterminate]::before]:[mask:none] [&>input[data-state=indeterminate]::before]:[clip-path:inset(42%_12%_42%_12%)] [&>input:disabled]:opacity-50 [&>input:disabled]:cursor-not-allowed [&>input[data-disabled]]:opacity-50 [&>input[data-disabled]]:cursor-not-allowed [&:has(>input:disabled)]:opacity-50 [&:has(>input:disabled)]:cursor-not-allowed');

@source inline("[&>input::before]:content-['']");

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

使用例

Grouped preferences

Use the first-child legend to name the group and keep a native label on each control.

Fieldset / Legend

Default

Contact preferencesEmailText message

import { Checkbox, Fieldset, FieldsetLegend } from "@gunkin/uiify";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend>Contact preferences</FieldsetLegend>
      <Checkbox id="contact-email" label="Email" name="contact" value="email" />
      <Checkbox id="contact-sms" label="Text message" name="contact" value="sms" />
    </Fieldset>
  );
}

API

`Fieldset`

Prop	型	既定値	説明
`children`	`ReactNode`	—	Grouped controls and a first-child FieldsetLegend.
`className / style / ref / native fieldset props`	`native fieldset props`	—	Native fieldset props, styles, events, and ref are forwarded.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`FieldsetLegend`

Prop	型	既定値	説明
`children`	`ReactNode`	—	Visible group name rendered as the native legend.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

キーボード

キー	操作

アクセシビリティ

Fieldset and Legend render native fieldset and legend elements. Put FieldsetLegend first to name the group; each contained control still needs its own label. No synthetic group role or hidden legend is added.

スタイリングのフック

data-uiify-fieldsetdata-part="root|legend"

フレームワーク

スタイル

テーマ

言語

Fieldset

プレイグラウンド

Fieldset / Legend

デフォルト

使用例

Grouped preferences

Fieldset / Legend

Default

API

`Fieldset`

`FieldsetLegend`

キーボード

アクセシビリティ

スタイリングのフック