@lucca-front/ng 22.0.5 → 22.0.6-rc.1

package/llms/references/components/progress-stepper/progress-stepper.component.md

@@ -0,0 +1,281 @@
+# progress-stepper — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-progress-stepper-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-progress-stepper`
+
+### Basic
+
+```js
+import { provideRouter, RouterLink } from '@angular/router';
+import { ProgressStepperComponent, ProgressStepperStepComponent } from '@lucca-front/ng/progress-stepper';
+```
+
+```html
+<lu-progress-stepper current="3">
+	<lu-progress-stepper-step [routerLinkParam]="'./route/step-1'" label="Step" />
+	<lu-progress-stepper-step [routerLinkParam]="'./route/step-2'" label="Step" />
+	<lu-progress-stepper-step label="Step" />
+	<lu-progress-stepper-step label="Step" />
+	<lu-progress-stepper-step label="Step" />
+</lu-progress-stepper>
+```
+
+### Route
+
+```js
+import { provideRouter, RouterLink } from '@angular/router';
+import { ProgressStepperComponent, ProgressStepperStepComponent } from '@lucca-front/ng/progress-stepper';
+```
+
+```html
+<lu-progress-stepper current="2" steps="3">
+	<lu-progress-stepper-step [routerLinkParam]="{ commands: '/route/step-1', fragment: 'home' }" label="Home page" />
+	<lu-progress-stepper-step
+		[routerLinkParam]="{ commands: ['route', 'step', '2'], fragment: 'config' }"
+		label="Config page"
+	/>
+	<lu-progress-stepper-step [routerLinkParam]="{ commands: '/route/step-3', fragment: 'edit' }" label="Edit page" />
+</lu-progress-stepper>
+```
+
+## HTML/CSS
+
+Classe CSS : `.progressStepper`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/progressStepper';
+```
+
+```html
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step</span>
+			</span>
+		</li>
+	</ol>
+</div>
+```
+
+### States
+
+```css
+@forward '@lucca-front/scss/src/components/progressStepper';
+```
+
+```html
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step is-success">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step success</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step is-critical">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step critical</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Step current</span>
+			</span>
+		</li>
+	</ol>
+</div>
+```
+
+### Steps
+
+```css
+@forward '@lucca-front/scss/src/components/progressStepper';
+```
+
+```html
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+	</ol>
+</div>
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+	</ol>
+</div>
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+		<li class="progressStepper-list-step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+	</ol>
+</div>
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+	</ol>
+</div>
+<div class="progressStepper">
+	<ol class="progressStepper-list">
+		<li class="progressStepper-list-step">
+			<a href="#" class="progressStepper-list-step-linkOptional">
+				<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+				<span class="progressStepper-list-step-title">
+					<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+				</span>
+			</a>
+		</li>
+		<li class="progressStepper-list-step" aria-current="step">
+			<span class="progressStepper-list-step-number" aria-hidden="true"></span>
+			<span class="progressStepper-list-step-title">
+				<span luTooltip luTooltipWhenEllipsis class="progressStepper-list-step-title-content">Lorem ipsum dolor</span>
+			</span>
+		</li>
+	</ol>
+</div>
+```

package/llms/references/components/progress-stepper/progress-stepper.md

@@ -0,0 +1,70 @@
+# progress-stepper
+
+## Import
+
+```typescript
+import { ProgressStepperStepComponent, ProgressStepperComponent } from '@lucca-front/ng/progress-stepper';
+```
+
+## Basic Usage
+
+```html
+<lu-progress-stepper current="3"> <lu-progress-stepper-step [routerLinkParam]="'./route/step-1'" label="Step" /> <lu-progress-stepper-step [routerLinkParam]="'./route/step-2'" label="Step" /> <lu-progress-stepper-step label="Step" /> <lu-progress-stepper-step label="Step" /> <lu-progress-stepper-step label="Step" />
+</lu-progress-stepper>
+```
+
+## API Reference
+
+### ProgressStepperStepComponent (component)
+
+**Selector:** `lu-progress-stepper-step`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `string` | — | ✅ | — | — |
+| `state` | `state` | `ProgressStepperStepState \| null` | `null` | — | — | — |
+| `routerLinkParam` | `routerLinkParam` | `RouterLinkParam \| string \| readonly string[] \| UrlTree \| null \| undefined` | `null` | — | — | — |
+
+### ProgressStepperComponent (component)
+
+**Selector:** `lu-progress-stepper`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `current` | `current` | `number` | `1` | — | `luNumberAttribute` | Étape courante. |
+
+## Related files
+
+- 📝 [Code & implementation](./progress-stepper.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/progress-stepper/progress-stepper.design.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-progress-stepper-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+`ProgressStepperComponent` :
+  ~ `current` : transform numberAttribute → luNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `PROGRESS_STEPPER_STEP_STATE` constant and `ProgressStepperStepState` type are now publicly exported and used to type the step `state` input.
+
+#### 21.2.0
+
+##### Added
+
+- `lu-progress-stepper` component (`progressStepper`) and its `lu-progress-stepper-step` children to display the progress of a multi-step flow.
+- Step inputs: `label`, `state` (`success`, `critical`), `current` and `routerLinkParam`.
+- `LU_PROGRESS_STEPPER_INSTANCE` injection token exposing the stepper instance to its descendants.

package/llms/references/components/radiofield/radiofield.component.md

@@ -0,0 +1,295 @@
+# radiofield — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-radiofield-angular--docs)
+
+## Angular
+
+Component selector : `lu-radio-group-input`
+
+### Utilisation
+
+Au sein de votre template, l'utilisation de l'input radio se fait via deux composants distincts:
+
+- `lu-radio-group-input` qui gère le lien entre chaque radio et qui porte le `formControl`.
+- `lu-radio` qui permet de lister les options.
+
+Exemple:
+
+Comme tous les `lu-***-input`, il est recommandé de les utiliser dans un `lu-form-field` même si vous n'avez pas de label à afficher, afin d'assurer une bonne accessibilité (le label est obligatoire mais vous pouvez le rendre caché pour que seules les technologies d'assistance puissent le voir).
+
+#### lu-radio
+
+Le composant `lu-radio` porte les valeurs, les options que vous souhaitez proposer.
+
+Il vous permet d'assigner une valeur via `[value]` et le label affiché vient se placer au sein de la balise, en tant que contenu projeté. Si vous souhaitez ajouter un texte sous le label, vous pouvez le faire via `inlineMessage`, uniquement en `string`.
+
+Il est également possible de désactiver une option via l'input `disabled` sur celle-ci.
+
+### Field
+
+```js
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { RADIO_GROUP_INPUT_SIZE, RadioComponent, RadioGroupInputComponent } from '@lucca-front/ng/forms';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+```
+
+```html
+<lu-form-field label="Label" tooltip="Tooltip message" inlineMessage="Helper message" inlineMessageState="default">
+	<lu-radio-group-input required [(ngModel)]="model.example">
+		<lu-radio [value]="1" inlineMessage="Option text">Option A</lu-radio>
+		<lu-radio [value]="2" inlineMessage="Option text">Option B</lu-radio>
+		<ng-template #template>
+			<strong>Option</strong>
+			 text
+		</ng-template>
+		<lu-radio [value]="3" [inlineMessage]="template" disabled>Option C</lu-radio>
+	</lu-radio-group-input>
+</lu-form-field>
+
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+## HTML/CSS
+
+Classe CSS : `.radioField`
+
+### Field disabled
+
+```css
+@forward '@lucca-front/scss/src/components/radioField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<fieldset class="form-fieldset">
+	<legend class="formLabel">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioA">Option A</label>
+		<span class="radioField">
+			<input
+				disabled="disabled"
+				type="radio"
+				class="radioField-input"
+				id="IDradioA"
+				name="radioName1"
+				aria-describedby="IDmessageRadioA"
+				checked
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioA">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioB">Option B</label>
+		<span class="radioField">
+			<input
+				disabled="disabled"
+				type="radio"
+				class="radioField-input"
+				id="IDradioB"
+				name="radioName1"
+				aria-describedby="IDmessageRadioB"
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioB">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+</fieldset>
+```
+
+### Field inline
+
+```css
+@forward '@lucca-front/scss/src/components/radioField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<fieldset class="form-fieldset mod-inline">
+	<legend class="formLabel">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioA">Option A</label>
+		<span class="radioField">
+			<input
+				type="radio"
+				class="radioField-input"
+				id="IDradioA"
+				name="radioName1"
+				aria-describedby="IDmessageRadioA"
+				checked
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioA">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioB">Option B</label>
+		<span class="radioField">
+			<input type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioB">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+</fieldset>
+```
+
+### Field invalid
+
+```css
+@forward '@lucca-front/scss/src/components/radioField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<fieldset class="form-fieldset">
+	<legend class="formLabel">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioA">Option A</label>
+		<span class="radioField">
+			<input
+				aria-invalid="true"
+				type="radio"
+				class="radioField-input"
+				id="IDradioA"
+				name="radioName1"
+				aria-describedby="IDmessageRadioA IDmessageRadioGlobal"
+				checked
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioA">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioB">Option B</label>
+		<span class="radioField">
+			<input
+				aria-invalid="true"
+				type="radio"
+				class="radioField-input"
+				id="IDradioB"
+				name="radioName1"
+				aria-describedby="IDmessageRadioB IDmessageRadioGlobal"
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioB">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="inlineMessage is-error" id="IDmessageRadioGlobal">
+		<p class="inlineMessage-content">Helper message</p>
+	</div>
+</fieldset>
+```
+
+### Field size
+
+```css
+@forward '@lucca-front/scss/src/components/radioField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<fieldset class="form-fieldset mod-S">
+	<legend class="formLabel">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioA">Option A</label>
+		<span class="radioField">
+			<input
+				type="radio"
+				class="radioField-input"
+				id="IDradioA"
+				name="radioName1"
+				aria-describedby="IDmessageRadioA"
+				checked
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioA">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioB">Option B</label>
+		<span class="radioField">
+			<input type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioB">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+</fieldset>
+```
+
+### Field
+
+```css
+@forward '@lucca-front/scss/src/components/radioField';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<fieldset class="form-fieldset">
+	<legend class="formLabel">
+		Label
+		<sup class="formLabel-required" aria-hidden="true">*</sup>
+	</legend>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioA">Option A</label>
+		<span class="radioField">
+			<input
+				type="radio"
+				class="radioField-input"
+				id="IDradioA"
+				name="radioName1"
+				aria-describedby="IDmessageRadioA"
+				checked
+			/>
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioA">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+	<div class="form-field">
+		<label class="formLabel" for="IDradioB">Option B</label>
+		<span class="radioField">
+			<input type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
+			<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
+		</span>
+		<div class="inlineMessage" id="IDmessageRadioB">
+			<p class="inlineMessage-content">Option text</p>
+		</div>
+	</div>
+</fieldset>
+```