PlFieldset

한 질문에 함께 답하는 컨트롤 묶음이고, 그 위에 이름이 붙습니다. 표면은 그리지 않습니다. 묶음은 시트가 아니고, 시트는 이미 있습니다.

React

import { PlFieldset, PlTextField } from 'plass-ui';

<PlFieldset legend="Billing address" description="Where the invoice goes.">
  <PlTextField label="Street" />
  <PlTextField label="City" />
</PlFieldset>;

import 'package:plass_ui/plass_ui.dart';

PlFieldset(
  legend: const Text('Billing address'),
  description: const Text('Where the invoice goes.'),
  children: <Widget>[streetField, cityField],
);

Props

Prop	타입	기본값	설명
legend	ReactNode	—	이 묶음의 이름. 안에 든 모든 컨트롤의 접근 가능한 이름에 들어가므로, 각각 앞에 놓아도 말이 되는 구절이어야 합니다 — "받는 주소"이지 "어디로 보낼까요?"가 아닙니다
description	ReactNode	—	legend 아래 한 줄
disabled	boolean	false	안의 모든 컨트롤을 한 번에 끕니다. <fieldset>이 늘 해 온 그대로입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	legend의 타입 스케일과 컨트롤 사이의 간격
children	ReactNode	—	한 질문에 함께 답하는 컨트롤들

Prop	타입	기본값	설명
children *	List<Widget>	—	한 질문에 함께 답하는 컨트롤들
legend	Widget?	—	이 묶음의 이름. 안에 든 모든 컨트롤의 접근 가능한 이름에 들어가므로, 각각 앞에 놓아도 말이 되는 구절이어야 합니다 — "받는 주소"이지 "어디로 보낼까요?"가 아닙니다
description	Widget?	—	legend 아래 한 줄
disabled	bool	false	안의 모든 것에서 포인터와 focus를 거두고 묶음을 비웁니다. 브라우저의 fieldset 같은 cascade가 여기에는 없습니다
size공통	PlassSize	PlassSize.md	legend의 타입 스케일과 컨트롤 사이의 간격

네이티브 <fieldset> 속성은 모두 그대로 전달됩니다. color는 fieldset에 색을 칠할 표면이 없어서 제외됩니다.

공용 축이 라이브러리 전체에서 무엇을 뜻하는지는 prop 규약에 있습니다.

이 컴포넌트가 쥐는 세 가지

셋뿐입니다.

• legend. 안에 든 모든 컨트롤의 접근 가능한 이름에 들어갑니다. 각각 앞에 놓아도 말이 되는 구절이어야 하는 이유가 그것입니다. "받는 주소"이지 "어디로 보낼까요?"가 아닙니다.
• 간격. 컨트롤이 서는 거리이고, 시트 사다리를 씁니다.
• disabled. 진짜 <fieldset>만 할 수 있는 그 하나입니다. 안의 모든 컨트롤에 닿습니다: 세 단계 아래의 컴포넌트가 그리고 이쪽이 존재조차 모르는 것까지.

표면을 그리지 않고 color, variant, elevation도 받지 않습니다. 필드의 묶음은 묶음입니다. 시트가 필요하면 PlCard나 PlBox 안에 넣으세요.

Examples

disabled

<div> 대신 fieldset을 쓰는 이유입니다. 켜면 안의 모든 컨트롤이 tab 순서에서도 폼에서도 빠집니다. fieldset이 그것들이 무엇인지 알 필요 없이.

React

import { useState } from 'react';
import { PlCheckbox, PlFieldset, PlSwitch, PlTextField } from 'plass-ui';

export default function FieldsetDisabled() {
  const [same, setSame] = useState(true);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PlSwitch label="Same as shipping address" checked={same} onCheckedChange={setSame} />

      <PlFieldset legend="Billing address" disabled={same}>
        <PlTextField label="Street" fullWidth />
        <PlCheckbox label="This is a business address" />
      </PlFieldset>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetDisabled extends StatefulWidget {
  const FieldsetDisabled({super.key});

  @override
  State<FieldsetDisabled> createState() => _FieldsetDisabledState();
}

class _FieldsetDisabledState extends State<FieldsetDisabled> {
  bool _same = true;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 340,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          PlSwitch(
            value: _same,
            onChanged: (bool next) => setState(() => _same = next),
            label: const Text('Same as shipping address'),
          ),
          PlFieldset(
            legend: const Text('Billing address'),
            disabled: _same,
            children: const <Widget>[
              PlTextField(label: Text('Street'), fullWidth: true),
              PlCheckbox(value: false, label: Text('This is a business address')),
            ],
          ),
        ],
      ),
    );
  }
}

size

legend의 타입 스케일과 컨트롤 사이의 간격이고, 시트 사다리를 씁니다. PlCard가 섹션을 나눌 때 쓰는 그 사다리인데, fieldset은 폼 안의 컨트롤이 아니라 폼의 한 섹션이기 때문입니다.

React

import { PlFieldset, PlTextField, type PlassSize } from 'plass-ui';

export default function FieldsetSizes() {
  return (
    <div className="grid w-full gap-8 sm:grid-cols-3">
      {(['sm', 'md', 'lg'] as PlassSize[]).map((size) => (
        <PlFieldset key={size} size={size} legend={size} description="A group at this step">
          <PlTextField size={size} label="One" fullWidth />
          <PlTextField size={size} label="Two" fullWidth />
        </PlFieldset>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetSizes extends StatelessWidget {
  const FieldsetSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 24,
      runSpacing: 24,
      children: <Widget>[
        for (final PlassSize size in <PlassSize>[PlassSize.sm, PlassSize.md, PlassSize.lg])
          SizedBox(
            width: 200,
            child: PlFieldset(
              size: size,
              legend: Text(size.name),
              description: const Text('A group at this step'),
              children: <Widget>[
                PlTextField(size: size, label: const Text('One'), fullWidth: true),
                PlTextField(size: size, label: const Text('Two'), fullWidth: true),
              ],
            ),
          ),
      ],
    );
  }
}

시트 안에서

카드 하나에 fieldset 둘이 흔한 배치이고, 표면을 그리지 않는 규칙이 값을 하는 자리가 거기입니다. 카드가 시트이고, 각 묶음은 그 위의 이름과 간격입니다.

React

import { PlCard, PlFieldset, PlRadio, PlRadioGroup, PlTextField } from 'plass-ui';

export default function FieldsetOnASheet() {
  return (
    <PlCard className="w-full max-w-md" title="Delivery">
      <div className="flex flex-col gap-6">
        <PlFieldset legend="Where" size="sm">
          <PlTextField size="sm" label="Street" fullWidth />
        </PlFieldset>

        <PlFieldset legend="How fast" size="sm">
          <PlRadioGroup size="sm" defaultValue="standard">
            <PlRadio value="standard" label="Standard" />
            <PlRadio value="express" label="Express" />
          </PlRadioGroup>
        </PlFieldset>
      </div>
    </PlCard>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetOnASheet extends StatefulWidget {
  const FieldsetOnASheet({super.key});

  @override
  State<FieldsetOnASheet> createState() => _FieldsetOnASheetState();
}

class _FieldsetOnASheetState extends State<FieldsetOnASheet> {
  String _speed = 'standard';

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 400,
      child: PlCard(
        title: const Text('Delivery'),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          spacing: 24,
          children: <Widget>[
            const PlFieldset(
              size: PlassSize.sm,
              legend: Text('Where'),
              children: <Widget>[
                PlTextField(size: PlassSize.sm, label: Text('Street'), fullWidth: true),
              ],
            ),
            PlFieldset(
              size: PlassSize.sm,
              legend: const Text('How fast'),
              children: <Widget>[
                PlRadioGroup<String>(
                  size: PlassSize.sm,
                  value: _speed,
                  onChanged: (String? next) => setState(() => _speed = next ?? 'standard'),
                  options: const <PlRadioOption<String>>[
                    PlRadioOption<String>(value: 'standard', label: Text('Standard')),
                    PlRadioOption<String>(value: 'express', label: Text('Express')),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

되돌린 브라우저 기본값 둘

<fieldset>은 자기만의 border, padding, margin을 갖고 도착하는데, 셋 다 이 라이브러리의 것이 아닙니다. 전부 되돌립니다.

min-width: min-content도 마찬가지입니다. 모든 브라우저가 fieldset에만 주는 값이고, 넓은 표를 담은 fieldset이 flex row 안에서 줄어들기를 거부하는 이유가 그것입니다. min-w-0이 그것을 되돌립니다.

React 빌드와 다른 점

React	Flutter	이유
네이티브 <fieldset> 속성인 disabled	포인터를 거두고, focus를 거두고, 묶음을 비움	Flutter에는 그런 cascade가 없습니다. 그 속성이 실제로 사 주는 세 가지를 대신 합니다. 못 하는 것은 안의 필드가 스스로 "쓸 수 없음"이라고 말하게 하는 것이라, 그렇게 알려야 하는 필드에는 자기 disabled를 주세요.
브라우저의 border·padding·margin·min-width를 되돌린 <fieldset>	Column	되돌릴 것이 없습니다.
모든 컨트롤의 접근 가능한 이름에 들어가는 legend	이름 있는 컨테이너 위의 heading인 legend	물려받을 <fieldset>/<legend> 짝이 Flutter에는 없고, 컨트롤 이름마다 앞에 붙이면 묶음의 이름을 컨트롤 수만큼 말하게 됩니다.
children	children: List<Widget>	스택을 여기서 배치하므로 받은 것을 셉니다.
className, style, 네이티브 속성	—	전달할 class 목록도 style 속성도 없습니다.

Accessibility

• 진짜 <fieldset>이고, 그것이 group이며, legend가 이름을 냅니다.
• legend는 그려진 <legend>가 아니라 aria-labelledby가 가리키는 <div>입니다. Base UI의 결정이고, 그 덕에 묶음이 평범한 flex 컨테이너가 됩니다. 진짜 <legend>는 모든 브라우저가 fieldset의 content box 밖으로 들어 올리므로, gap이 그 아래에 아무 공간도 만들지 못합니다.
• fieldset의 disabled는 네이티브 속성이라 플랫폼이 하는 방식으로 자손을 비활성화합니다. context도, prop을 꿰는 일도, 나중에 추가된 컨트롤에서 잊을 것도 없습니다.
• legend도 description도 없는 fieldset은 heading 블록을 아예 그리지 않습니다. 빈 이름은 없는 것보다 나쁩니다. 모든 컨트롤 이름 앞에 공백을 붙이기 때문입니다.