VLLNT UI · Famille de composants

Composants Form

Form components cover the full input surface — text and search fields, selects, checkboxes, date and time pickers, ratings, and validation — so you can assemble accessible, controlled forms without wiring primitives by hand.

Text Inputs

Typed input fields for text, numbers, passwords, phone numbers, OTP codes, and inline editing.

Text Field

Champ de texte avec libelle regroupant description et message d'erreur. Installez Text Field depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Inline Input

Champ de saisie en ligne avec validation et annulation au clavier. Installez Inline Input depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Input Group

Regroupe un champ de saisie avec des modules en tete ou en fin. Installez Input Group depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Input OTP

Saisie de mot de passe a usage unique avec champs segmentes. Installez Input OTP depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Number Input

Champ numerique avec controles d'incrementation et de decrementation. Installez Number Input depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Password Input

Champ de mot de passe avec bascule de visibilite integree. Installez Password Input depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Phone Input

Champ de numero de telephone avec selecteur d'indicatif pays. Installez Phone Input depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Selection Controls

Dropdowns, comboboxes, list boxes, and multi-select controls for choosing from predefined options.

Select

Champ de selection deroulant pour choisir dans une liste d'options. Installez Select depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Native Select

Habillage stylise autour de l'element select natif. Installez Native Select depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Combobox

Champ de selection recherchable pour choisir dans une liste d'options. Installez Combobox depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Multi Select

Champ de selection multiple base sur un popover avec badges de valeurs selectionnees et recherche optionnelle. Installez Multi Select depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

List Box

Liste d'options accessible a selection simple ou multiple. Installez List Box depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Segmented Control

Selecteur segmente a choix unique pour changer de modes, de vues ou de filtres. Installez Segmented Control depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Button Group

Groupe de boutons visuellement connectes qui partagent des bordures. Installez Button Group depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Checkbox Group

Groupe de cases a cocher associees soutenu par un tableau de valeurs selectionnees. Installez Checkbox Group depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Tags & Custom Pickers

Tag editors, color pickers, and scoped selectors for specialized selection and entry tasks.

Tag Group

Ensemble d'etiquettes prenant en charge la selection et la suppression. Installez Tag Group depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Tags Input

Editeur d'etiquettes convivial au clavier pour ajouter et supprimer des valeurs de chaine. Installez Tags Input depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Color Picker

Selecteur de couleur en popover avec des echantillons, un curseur de teinte et une saisie hexadecimale. Installez Color Picker depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Scope Selector

Selecteur de portee multi-niveaux pour environnements imbriques, equipes et cibles. Installez Scope Selector depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
2 storiesVoir le composant

Search & Filtering

Search bars, search fields, filter bars, and category filters for querying and narrowing content lists.

Category Filter

Selection de categorie filtrable pour les listes de contenu. Installez Category Filter depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Filter Bar

Barre horizontale avec controles de filtre pour listes de contenu. Installez Filter Bar depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Search Bar

Champ de recherche textuelle avec icone et fonction d'effacement. Installez Search Bar depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Search Field

Champ de recherche avec une icone en tete et un bouton d'effacement. Installez Search Field depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Date & Time

Calendars, date pickers, range pickers, and time selectors for capturing dates, times, and playback ranges.

Calendar

Calendrier selecteur de dates pour choisir des dates. Installez Calendar depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Range Calendar

Calendrier qui selectionne une date de debut et de fin sous forme de plage. Installez Range Calendar depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Date Field

Saisie de date native stylisee pour correspondre au systeme de design. Installez Date Field depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Date Picker

Selecteur de date unique construit avec les primitives partagees de calendrier et de popover. Installez Date Picker depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Date Range Picker

Calendrier en popover pour selectionner une date de debut et de fin. Installez Date Range Picker depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Time Field

Champ d'heure natif stylise pour correspondre au design system. Installez Time Field depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Time Picker

Selecteur d'heure en popover compose de colonnes d'heures et de minutes. Installez Time Picker depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Timeline Scrubber

Curseur de plage pour parcourir la lecture des etats du canvas, avec reperes de jalons optionnels. Installez Timeline Scrubber depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
4 storiesVoir le composant

Form Structure

Form wrappers, fields, fieldsets, item rows, and file uploads for composing and validating complete forms.

Form

Conteneur de validation pour composer libelles, descriptions, controles et messages. Installez Form depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Field

Conteneur de mise en page associant un libelle, un controle, une description et un message d'erreur. Installez Field depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
3 storiesVoir le composant

Fieldset

Regroupe des champs lies sous une legende commune. Installez Fieldset depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

Item

Mise en page de ligne flexible avec media en tete, contenu et actions en fin. Installez Item depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
2 storiesVoir le composant

File Upload

Selecteur de fichiers de type zone de depot avec apercus des fichiers selectionnes. Installez File Upload depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:WebNatif
1 storyVoir le composant

Newsletter Signup

Formulaire de capture d'e-mail avec machine a etats idle/sending/sent/error, validateurs personnalises et libelles remplacables. Installez Newsletter Signup depuis le registre VLLNT UI avec la CLI shadcn.

Plateformes prises en charge:Web
5 storiesVoir le composant

Questions frequentes

What input types are covered?
Text, search, and phone fields, selects and comboboxes, checkboxes and radio groups, date/time/range pickers, ratings, OTP inputs, and validation wrappers.
Are the form components accessible and validated?
Yes. Inputs are accessible by default and integrate with react-hook-form via the Form components; they work controlled or uncontrolled.