Hoppa till huvudinnehåll

Checkbox

Kryssruta
Version: 1.0.2
Versionslogg
Storybook
Referens

Introduktion​

Kryssrutor används för att låta användaren välja inget, ett eller flera alternativ. Om det är många alternativ så bör MultiSelect användas istället.

Installation​

npm install @midas-ds/checkbox
import { Checkbox } from '@midas-ds/checkbox'
;<Checkbox>Jag godkänner villkoren</Checkbox>

Exempel​

Gruppera flera checkboxar​

Använd <CheckboxGroup> för att gruppera flera checkboxar som hör samman.

Etikett och beskrivning​

Etikett för enskild checkbox sätts i template via <Checkbox>Etikett</Checkbox>. <CheckboxGroup> har en label och en desciption för ytterligare förklarande text.

Disabled​

När en kryssruta inte är tillämplig i den aktuella situationen ska kryssruta och fältetikett tonas ned via attributet isDisabled men inte tas bort.

Validering​

Används prop isInvalid och implementera lämplig logik för att hantera fel och felmeddelanden. Se React Aria för ytterligare referens.

Readonly och defaultSelected​

Sätt prop isReadonly när användaren inte ska kunna påverka checkboxens tillstånd. defaultSelected sätter checkboxen i ett valt läge.

Välj alla​

Ibland kan det vara lämligt att inkludera en checkbox för att "Välja alla". Denna funktion finns inbyggt i <CheckboxGroup /> via egenskapen: showSelectAll

Riktlinjer​

Val av komponent​

  • Använd inte kryssruta om användaren väntar sig att valet ska få effekt direkt

  • Om flera kryssrutor är placerade under varandra, kan det ibland vara lämpligt att användaren kan markera alla kryssrutor genom att klicka i det översta alternativet, ”Alla”, som är placerat direkt ovanför de ordinarie kryssrutorna. Rutan ska vara avmarkerad tills användaren klickar i den och då ska alla följande rutor och eventuella subrutor markeras. Om användaren väljer att avmarkera en post så ska kryssrutan avmarkeras.

  • Om ”Markera alla”-kryssruta används på en sida med paginerat innehåll så skall endast de kryssrutor som finns på den aktuella sidan väljas.

  • Fältetikett ska inledas med en stor bokstav och inte följas av punkt.

Beroenden​

  • @midas-ds/theme@^0.5.23