packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithDescription.html

 <fieldset class="fr-fieldset" id="input2" aria-labelledby="input2-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input2-legend">Légende <span class="fr-hint-text">description</span></legend>
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input2-legend">Légende (optionnel)<span class="fr-hint-text">description</span></legend>
   <div class="fr-fieldset__element">
     <div class="fr-radio-group"><input type="radio" id="input2-0" name="input2"><label class="fr-label" for="input2-0">checkbox1<span class="fr-hint-text">avec description</span></label></div>
   </div>

packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithValue.html

 <fieldset class="fr-fieldset" id="input4" aria-labelledby="input4-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input4-legend">Légende
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input4-legend">Légende (optionnel)
     <!---->
   </legend>
   <div class="fr-fieldset__element">

packages/ui/src/components/_ui/dsfr-input-radio.tsx

@@ -33,7 +33,7 @@ export const DsfrInputRadio = defineComponent(<T extends string>(props: Props<T>
     >
       {isNotNullNorUndefinedNorEmpty(props.legend.main) ? (
         <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${id}-legend`}>
-          {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? ' *' : ''}
+          {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? '' : ' (optionnel)'}
           {isNotNullNorUndefined(props.legend.description) && props.legend.description !== '' ? <span class="fr-hint-text">{props.legend.description}</span> : null}
         </legend>
       ) : null}

packages/ui/src/components/_ui/dsfr-input.stories.tsx

@@ -11,23 +11,33 @@ const meta: Meta = {
 export default meta
 const valueChangedAction = action('valueChanged')
 
-export const Default: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
-export const WithDescription: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', description: 'description' }} valueChanged={valueChangedAction} />
+export const Default: StoryFn = () => <DsfrInput required={true} type={{ type: 'text' }} id="input1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
+export const WithDescription: StoryFn = () => (
+  <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', description: 'description' }} valueChanged={valueChangedAction} />
+)
 export const WithDescriptionAndPlaceholder: StoryFn = () => (
-  <DsfrInput type={{ type: 'text' }} id="input3" legend={{ main: 'Légende', description: 'une URL', placeholder: 'https://' }} valueChanged={valueChangedAction} />
+  <DsfrInput required={true} type={{ type: 'text' }} id="input3" legend={{ main: 'Légende', description: 'une URL', placeholder: 'https://' }} valueChanged={valueChangedAction} />
+)
+export const WithValue: StoryFn = () => (
+  <DsfrInput required={true} type={{ type: 'text' }} id="input4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+)
+export const Disabled: StoryFn = () => (
+  <DsfrInput required={true} type={{ type: 'text' }} id="input5" disabled={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
 )
-export const WithValue: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Disabled: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input5" disabled={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Required: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input6" required={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Number: StoryFn = () => <DsfrInput id="input1" type={{ type: 'number', min: 1, max: 10 }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
+export const Required: StoryFn = () => <DsfrInput required={true} type={{ type: 'text' }} id="input6" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+export const Number: StoryFn = () => <DsfrInput id="input1" required={true} type={{ type: 'number', min: 1, max: 10 }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
 export const Date: StoryFn = () => (
-  <DsfrInput id="input1" type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
+  <DsfrInput id="input1" required={true} type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
 )
 
 export const WithInfo: StoryFn = () => (
-  <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'info', value: 'Ceci est une information' } }} valueChanged={valueChangedAction} />
+  <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'info', value: 'Ceci est une information' } }} valueChanged={valueChangedAction} />
 )
 
 export const WithError: StoryFn = () => (
-  <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'error', value: 'Le champ est en erreur' } }} valueChanged={valueChangedAction} />
+  <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'error', value: 'Le champ est en erreur' } }} valueChanged={valueChangedAction} />
+)
+
+export const Optional: StoryFn = () => (
+  <DsfrInput id="input1" required={false} type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
 )

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Date.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
+    <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
     <!---->
-    <!---->
-  </label><input class="fr-input" name="input1" id="input1" type="date" value="2023-02-26">
+  </label><input class="fr-input" name="input1" id="input1" required="" type="date" value="2023-02-26">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Default.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
     <!---->
     <!---->
-  </label><input class="fr-input" name="input1" id="input1" type="text">
+    <!---->
+  </label><input class="fr-input" name="input1" id="input1" required="" type="text">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Disabled.html

 <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input5">Légende
     <!---->
     <!---->
-  </label><input class="fr-input" name="input5" id="input5" disabled="" type="text" value="valeur initiale">
+    <!---->
+  </label><input class="fr-input" name="input5" id="input5" disabled="" required="" type="text" value="valeur initiale">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Number.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
     <!---->
     <!---->
-  </label><input class="fr-input" name="input1" id="input1" type="number" min="1" max="10">
+    <!---->
+  </label><input class="fr-input" name="input1" id="input1" required="" type="number" min="1" max="10">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Optional.html

+<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende (optionnel)<span class="fr-hint-text">au format jj/mm/yyyy</span>
+    <!---->
+  </label><input class="fr-input" name="input1" id="input1" type="date" value="2023-02-26">
+  <!---->
+</div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Required.html

-<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input6">Légende *
+<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input6">Légende
+    <!---->
+    <!---->
     <!---->
   </label><input class="fr-input" name="input6" id="input6" required="" type="text" value="valeur initiale">
   <!---->

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescription.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
+    <!---->
     <!----><span class="fr-hint-text">description</span>
-  </label><input class="fr-input" name="input2" id="input2" type="text">
+  </label><input class="fr-input" name="input2" id="input2" required="" type="text">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescriptionAndPlaceholder.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input3">Légende
+    <!---->
     <!----><span class="fr-hint-text">une URL</span>
-  </label><input placeholder="https://" class="fr-input" name="input3" id="input3" type="text">
+  </label><input placeholder="https://" class="fr-input" name="input3" id="input3" required="" type="text">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithError.html

 <div class="fr-input-group fr-input-group--error" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
     <!---->
     <!---->
-  </label><input class="fr-input fr-input--error" name="input2" id="input2" type="text" aria-describedby="input2-info">
+    <!---->
+  </label><input class="fr-input fr-input--error" name="input2" id="input2" required="" type="text" aria-describedby="input2-info">
   <p id="input2-info" class="fr-error-text">Le champ est en erreur</p>
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithInfo.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
     <!---->
     <!---->
-  </label><input class="fr-input" name="input2" id="input2" type="text" aria-describedby="input2-info">
+    <!---->
+  </label><input class="fr-input" name="input2" id="input2" required="" type="text" aria-describedby="input2-info">
   <p id="input2-info" class="fr-info-text">Ceci est une information</p>
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithValue.html

 <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input4">Légende
     <!---->
     <!---->
-  </label><input class="fr-input" name="input4" id="input4" type="text" value="valeur initiale">
+    <!---->
+  </label><input class="fr-input" name="input4" id="input4" required="" type="text" value="valeur initiale">
   <!---->
 </div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-input.tsx

@@ -21,7 +21,7 @@ type BaseProps = {
   id?: string
   legend: { main: string; visible?: boolean; description?: string; placeholder?: string; info?: { type: 'info' | 'error'; value: string } }
   disabled?: boolean
-  required?: boolean
+  required: boolean
 }
 
 type Props = BaseProps & (TextProps | NumberProps | DateProps)
@@ -83,7 +83,9 @@ export const DsfrInput = defineComponent<Props>(props => {
     >
       {(props.legend.visible ?? true) ? (
         <label class="fr-label" for={id}>
-          {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? ' *' : null}
+          {props.legend.main}
+          {!props.required ? ' (optionnel)' : null}
+          {props.type.type === 'date' ? <span class="fr-hint-text">au format jj/mm/yyyy</span> : null}
           {isNotNullNorUndefined(props.legend.description) ? <span class="fr-hint-text" v-html={props.legend.description}></span> : null}
         </label>
       ) : null}
@@ -95,7 +97,7 @@ export const DsfrInput = defineComponent<Props>(props => {
         name={id}
         id={id}
         disabled={props.disabled ?? false}
-        required={props.required ?? false}
+        required={props.required}
         {...(props.type ?? { type: 'text' })}
         aria-describedby={isNotNullNorUndefined(props.legend.info) && props.legend.info.value !== '' ? `${id}-info` : undefined}
       />

packages/ui/src/components/_ui/dsfr-select.stories.tsx

@@ -15,13 +15,22 @@ const items = [
   { id: 'id2', label: 'second label' },
 ] as const
 
-export const Default: StoryFn = () => <DsfrSelect id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
+export const Default: StoryFn = () => <DsfrSelect required={true} id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
 export const WithDescriptionAndPlaceholder: StoryFn = () => (
-  <DsfrSelect id="select" legend={{ main: 'label de cadix', description: 'Description', placeholder: 'Placeholder custom' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
+  <DsfrSelect
+    required={true}
+    id="select"
+    legend={{ main: 'label de cadix', description: 'Description', placeholder: 'Placeholder custom' }}
+    items={items}
+    initialValue={null}
+    valueChanged={onvalueChangedAction}
+  />
 )
-export const AlreadySelectedItem: StoryFn = () => <DsfrSelect id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+export const AlreadySelectedItem: StoryFn = () => <DsfrSelect required={true} id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
 
-export const Disabled: StoryFn = () => <DsfrSelect id="select" disabled={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+export const Disabled: StoryFn = () => (
+  <DsfrSelect required={true} id="select" disabled={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+)
 export const Required: StoryFn = () => <DsfrSelect id="select" required={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
 
 export const ElementDisabled: StoryFn = () => (
@@ -38,3 +47,5 @@ export const ElementDisabled: StoryFn = () => (
     valueChanged={onvalueChangedAction}
   />
 )
+
+export const Optional: StoryFn = () => <DsfrSelect id="select" required={false} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />

packages/ui/src/components/_ui/dsfr-select.stories_snapshots_ElementDisabled.html

-<div class="fr-select-group"><label class="fr-label" for="select">label de cadix *
+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix
     <!---->
   </label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
     <option selected="" value="id1">premier label</option>

packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Optional.html

+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix (optionnel)
+    <!---->
+  </label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
+    <option selected="" value="id1">premier label</option>
+    <option value="id2">second label</option>
+    <option disabled="" hidden="" value="">Selectionnez une option</option>
+  </select></div>
\ No newline at end of file

packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Required.html

-<div class="fr-select-group"><label class="fr-label" for="select">label de cadix *
+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix
     <!---->
   </label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
     <option selected="" value="id1">premier label</option>