Label

Etikett

Storybook

React Aria

Etikett med fördefinerad stil, för användning i ett formulär.

<Label>Jag är en vanlig etikett</Label>

Jag är en vanlig etikett

Notera att samtliga formulärkomponenter som midas exporterar redan använder Label internt, komponenterna exponerar istället attributet label för textvärdet. Använd denna dokumentation om du avser att själv sätta ihop ett formulärelement, eller behöver en etikett till ett annat syfte.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Label } from '@midas-ds/components'

Varianter

Stil

Använd egenskapen variant för att justera etikettens utseende

<Label variant='label-02'>Jag är en etikett av varianten 'label-02'</Label>

Jag är en etikett av varianten 'label-02'

Val av element

Egenskapen elementType kan användas för att ändra etikettens DOM-element.

<Label elementType='div'>Jag är en div</Label>

Jag är en div

Användning i formulär

Midas Label bygger på Label från react-aria-components Utöver ovan nämnda attribut accepteras samtliga attribut som för HTMLelementet <label> i react.

Manuell koppling med htmlFor

<Label htmlFor="firstname">Förnamn</Label>
<input id="firstname" />

Förnamn

API

Label

Name	Type	Default	Description
variant	"label-01" | "label-02"	label-01	The visual variant of the component
elementType	string	label