Concorde documentation — Concorde form components. Hub for form UI: sonic-input, sonic-select, sonic-checkbox, sonic-submit, formDataProvider, FormElement. Doc ID: hubs/form-components. Keywords: form, FormElement, formDataProvider, sonic-input, sonic-select, sonic-checkbox, sonic-submit. URL: https://concorde.supersoniks.org/crawl/hubs/form-components.html.

Checkbox

Size

     2xs checkbox
     xs checkbox
     sm checkbox
     default checkbox
     lg checkbox
     xl checkbox
     2xl checkbox

Checked

 Already checked checkbox

Disabled

 Disabled checkbox

Disabled and checked

 Disabled but already checked checkbox

Checkbox with link

 Checkbox with  link

Check all checkbox

       All

       Foo
       Bar

         Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.

         Baz

Example of use — blacklist + queue

Checked blacklistFlags values are sent to the mock API (?blacklistFlags=racist,sexist,…), which excludes jokes whose flags match (see filterDocsJokes in src/docs/mock-api/fixtures.ts).

Fieldset

Variant

      Default

      Ghost

      Shadow

Legend

      Custom legend via  slot

        Description via composant : sonic-legend-description

Short hand

Example of use

          Informations personnelles
           Description du fieldset lorem ipsum dolor

               Mentions légales
               Conditions générales d'utilisation

             - Sélectionner -
             Je préfère ne pas le dire
             Homme
             Femme

          Coordonnées

          S'inscrire

            Continuer sans m'inscrire

        Submitted informations...

Form-actions

Left by default

            Submit
             Cancel

Justify

            Submit
             Cancel

Direction

            Submit
             Cancel

Center

          Left seats

          Right seats

Form-layout

         - Sélectionner -
         Je préfère ne pas le dire
         Homme
         Femme

       Activer une superbe option
       Inscription à la newsletter
       J'ai lu et accepte les  Conditions générales de ventes

         Valider

Input-autocomplete

The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue.

Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a queue in order to take full advantage of the input-autocomplete component.

Here are some of the features of the input-autocomplete component:

Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an items callback with the row object (see docs-queue-geo-demo in src/docs/example/docs-queue-demos.ts). Embedding without Lit: HTML integration.

 It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
 It can be used with a variety of data providers, such as an API.
 It is fully customizable, so you can change the look and feel of the component to match your needs.

If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option.

Simple Example

In this example, the input will use its name as the sea

Input

  Native attibutes list

Label

Placeholder

Value

Required

Description

Type
 Liste des types

     Text

Size

List

Prefix & suffix

InlineContent

         4 max

Example of use — search + queue

Filter with formDataProvider + name="contains" (mock API: substring on joke text). Caption and rows via Lit (@subscribe, .items on sonic-queue):

     azdazd

  PLOP   -->

Radio

Size

       2xs radio
       xs radio
       sm radio
       default radio
       lg radio
       xl radio
       2xl radio

Checked

 Already checked radio

Disabled

 Disabled radio

Disabled and checked

 Disabled but already checked radio

radio with link

 radio with  link

Example of use — blacklist + queue

Same mock filter as Checkbox (blacklistFlags query param). Radio sends one flag at a time.

Select

Options

         No Selection
         One
         Two (set by "tag")
         Three

Size

        2xs
        xs
        sm
        md
        default
        lg
        xl
        2xl

Multiple

         Choose a number
         One
         Two
         Three

Disabled

         Choose a number
         One
         Two
         Three

Example of use — language filter + queue

name="lang" is sent as ?lang=fr|en to the doc mock API (filterDocsJokes). Same pattern as Input (contains):

Switch

Size

       2xs switch
       xs switch
       sm switch
       default switch
       lg switch
       xl switch
       2xl switch

Checked

 Already checked switch

Disabled

 Disabled switch

Disabled and checked

 Disabled but already checked switch

switch with link

 switch with  link

Example of use — blacklist + queue

Same mock filter as Checkbox; switches can enable several flags (comma-separated in the query).

Textarea

  Native attibutes list

Label

Placeholder

Value

Required

Rows

Description

Size