InputCard

On a parfois besoin d'utiliser un composant plus visuel qu'un simple groupe de checkbox ou de radios pour proposer un choix à l'utilisateur. L'InputCard répond à ce besoin en proposant un bloc large (particulièrement adapté au tap sur mobile) contenant texte et icône au lieu d'un simple label.

L'InputCard peut être utilisé par exemple pour un choix entre plusieurs réglages, options ou fonctionnalités.

Checkbox ou Radio ?

Props	Valeurs autorisées	Valeur par défaut
type	radio, checkbox	radio

L'input créé dans l'InputCard peut être de type radio ou checkbox en fonction de la nécessité d'avoir plusieurs options sélectionnables ou non.

important

Si c'est un radio, n'oubliez pas de faire passer un name identique à tous les InputCard du même groupe !

Taille et style

Props	Valeurs autorisées	Valeur par défaut
blockSize	md, lg	lg

• Le blockSize lg définit des InputCard carrés de 150px * 150px (ou 120px * 120px sur des écrans inférieurs à theme.screen.min.sm).
• Le blockSize md définit des InputCard de la taille de leur contenu, ce qui les rend moins hauts et parfois moins larges que les lg.

Autres props

Props	Type ou valeurs autorisées	Valeur par défaut
id	string	⚠️ Requis
text	string OR object	Aucune

• L'id est obligatoire et doit être unique dans toute la page, car il permet au <label> de communiquer avec l'<input>.
• Le text définit le texte à afficher dans l'InputCard sous l'icône, lequel doit être passé comme children. L'icône comme le text sont facultatifs, mais il est fortement conseillé de toujours définir un text pour des raisons d'accessibilité.
• Toutes les autres props de l'InputCard sont passées directement à son input afin de permettre de lui ajouter tous les attributs nécessaires (name ou checked, par exemple).

Exemples

InputCard radio lg

Il s'agit de la version par défaut de ce composant.

Démo 🎉

Votre mode d'intégration

Sans intégration

Avec un module CMS

Par API

Code ⌨️

<Box paddingBottom="sm">

<DaLabel htmlTag="legend">Votre mode d'intégration</DaLabel>

</Box>

<InternalGrid

displayType="grid"

gridTemplateColumns="auto auto auto"

gridGap="lg"

hasStaticWidth={false}

>

<InputCard

text="Sans intégration"

id="checkbox_1"

name="checkbox"

>

<EmptyIcon />

</InputCard>

<InputCard

text="Avec un module CMS"

id="checkbox_2"

name="checkbox"

>

<PlugIcon />

</InputCard>

<InputCard text="Par API" id="checkbox_3" name="checkbox">

<CodeIcon />

</InputCard>

</InternalGrid>

InputCard checkbox md

Démo 🎉

Votre mode d'intégration

Sans intégration

Avec un module CMS

Par API

Code ⌨️

<Box paddingBottom="sm">

<DaLabel htmlTag="legend">Votre mode d'intégration</DaLabel>

</Box>

<InternalGrid

displayType="grid"

gridTemplateRows="auto auto auto"

justifyItems="start"

gridGap="md"

>

<InputCard

type="checkbox"

blockSize="md"

text="Sans intégration"

id="integration_1"

>

<EmptyIcon />

</InputCard>

<InputCard

type="checkbox"

blockSize="md"

text="Avec un module CMS"

id="integration_2"

>

<PlugIcon />

</InputCard>

<InputCard

type="checkbox"

blockSize="md"

text="Par API"

id="integration_3"

>

<CodeIcon />

</InputCard>

</InternalGrid>