Waarschuwing: Dit element maakt gebruik van experimentele CSS componenten: ::-webkit-color-swatch-wrapper en ::-webkit-color-swatch. Aangeraden wordt om dit component in deze vorm daarom niet in productie te gebruiken aangezien het kan zijn dat het component er anders uit ziet in verschillende browsers of dat de styling bij toekomstige updates kapot gaat. Als dit geen probleem is binnen jouw project kun je er voor kiezen dit component te gebruiken.

Kleurselector volledig gevuld

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. voeg type="color" toe aan het invoerveld.
  3. Voeg basiskleurwaarde met een hexidecimalekleurcode aan binnen: value. Voorbeeld: value="#ffffff". De ingevoerde kleur is de kleur waarin het selectievak getoond wordt binnen het formulier voordat de gebruiker een andere keuze maakt.

Voorbeelden

Visueel voorbeeld:

direct

HTML-voorbeeld:

section

<form action="" method="post">
  <label for="color-input-1">Selecteer de gewenste kleur</label>
  <input id="color-input-1" name="color-input-1" type="color" value="#ffffff">

  <button type="submit">Verzend</button>
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/form-base";
@use "@minvws/manon/form-input-color";
@use "@minvws/manon/form-input-color-filled";

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen: