Designsystemet Flutter

Utseende

DsFieldset ​

Gruppering av relaterte skjemaelementer med legend.

Bruk ​

Når bør du bruke DsFieldset? ​

  • Når du har en gruppe relaterte skjemafelter som logisk hører sammen, f.eks. adressefelt.
  • Når du trenger å gi en felles overskrift (legend) til en samling av inndatafelt.
  • Når du grupperer radioknapper eller avkrysningsbokser som hører til samme spørsmål.

Når bør du unngå DsFieldset? ​

  • Når du kun har ett enkelt felt. Bruk heller DsField alene.
  • Når feltene ikke er logisk relaterte og ikke trenger en felles overskrift.

Eksempler ​

Grunnleggende bruk ​

DsFieldset — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsFieldset(
  legend: 'Adresse',
  children: [
    DsField(label: 'Gate', child: DsTextfield(controller: gateController)),
    DsField(label: 'Postnummer', child: DsTextfield(controller: postnummerController)),
    DsField(label: 'Sted', child: DsTextfield(controller: stedController)),
  ],
)

Grupperte radioknapper ​

dart
DsFieldset(
  legend: 'Foretrukket kontaktmetode',
  children: [
    DsRadio(label: 'E-post', value: 'epost', groupValue: kontaktmetode, onChanged: (v) => setState(() => kontaktmetode = v)),
    DsRadio(label: 'Telefon', value: 'telefon', groupValue: kontaktmetode, onChanged: (v) => setState(() => kontaktmetode = v)),
    DsRadio(label: 'SMS', value: 'sms', groupValue: kontaktmetode, onChanged: (v) => setState(() => kontaktmetode = v)),
  ],
)

Retningslinjer ​

  • Bruk legend til å gi en tydelig overskrift som beskriver gruppen av felt.
  • Grupper kun felt som logisk hører sammen, f.eks. adressefelt eller kontaktinformasjon.
  • Ikke nøst flere fieldsets dypt -- hold strukturen flat og oversiktlig.

Tekst ​

  • Legend-teksten bør være kort og beskrivende, f.eks. «Adresse» eller «Kontaktinformasjon».
  • Unngå å bruke legend som en instruksjon -- den skal fungere som en overskrift for gruppen.

Har du innspill til denne komponenten? Send innspill på GitHub