[Input Label] FluentInputLabel Add a Label and update aria-label (#822)

* Add a new FluentInputLabel component to display a label and to update the aria-label of the associated Input component * Update for List components * Update all Input samples * Add a property LabelTemplate * Rename Title property to AriaLabel --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Oct 8, 2023 · b8c96fb · b8c96fb
1 parent b4a3936
commit b8c96fb
Show file tree

Hide file tree

Showing 64 changed files with 336 additions and 164 deletions.
diff --git a/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor b/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor
@@ -1,6 +1,5 @@
 @inject DataSource Data
 
-<label for="my-customized">Select a person</label>
 <FluentAutocomplete Id="my-customized"
                     @ref="ContactList"
                     TOption="Person"
@@ -12,6 +11,11 @@
                     OptionStyle="min-height: 40px;"
                     @bind-SelectedOptions="@SelectedItems">
 
+    <LabelTemplate>        
+        Select a person
+        <FluentIcon Value="@(new Icons.Regular.Size20.Person())" Style="margin: 0 4px;" />
+    </LabelTemplate>
+
     @* Template used with each Selected items *@
     <SelectedOptionTemplate>
         <FluentPersona ImageSize="24px"

diff --git a/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteDefault.razor b/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteDefault.razor
@@ -1,8 +1,7 @@
 @inject DataSource Data
 
-<label for="my-autocomplete">Select a country</label>
-<FluentAutocomplete Id="my-autocomplete"
-                    TOption="Country"
+<FluentAutocomplete TOption="Country"
+                    Label="Select a country"
                     Width="250px"
                     Placeholder="Select countries"
                     OnOptionsSearch="@OnSearchAsync"

diff --git a/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor b/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor
@@ -15,5 +15,3 @@
 <DemoSection Title="Default checkbox examples" Component="@typeof(CheckboxDefault)"></DemoSection>
 
 <DemoSection Title="Vertical checkboxes" Component="@typeof(CheckboxVertical)"></DemoSection>
-
-<DemoSection Title="Visual vs audio label" Component="@typeof(CheckboxAria)"></DemoSection>
diff --git a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxAria.razor b/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxAria.razor
diff --git a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor b/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor
@@ -3,7 +3,7 @@
 <FluentCheckbox @bind-Value=value1></FluentCheckbox>
 
 <p>With a label: </p>
-<FluentCheckbox @bind-Value=value2>label</FluentCheckbox>
+<FluentCheckbox @bind-Value=value2 Label="With a label:"></FluentCheckbox>
 
 <h4>Checked</h4>
 <FluentCheckbox @bind-Value=value3></FluentCheckbox>

diff --git a/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor b/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor
@@ -1,13 +1,13 @@
 @inject DataSource Data
 
 <h4>Select the best song from the list or type your own</h4>
-<FluentCombobox Id="combobox" Items="@Data.Hits" @bind-Value="@hit" Height="200px" />
+<FluentCombobox Label="Best song" Items="@Data.Hits" @bind-Value="@hit" Height="200px" />
 <p>
     Selected hit: @hit
 </p>
 
 <h4>Pre-selected option</h4>
-<FluentCombobox Items="@Data.Names" @bind-Value="@name" Height="200px" />
+<FluentCombobox AriaLabel="Pre-selected option" Items="@Data.Names" @bind-Value="@name" Height="200px" />
 <p>
     Selected name: @name
 </p>

diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor
@@ -1,5 +1,5 @@
-<FluentDatePicker @bind-Value="@SelectedValue" ReadOnly />
-<FluentDatePicker @bind-Value="@SelectedValue" />
+<FluentDatePicker Label="Meeting date" @bind-Value="@SelectedValue" ReadOnly />
+<FluentDatePicker AriaLabel="To" @bind-Value="@SelectedValue" />
 <p>Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))</p>
 @code
 {

diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor
@@ -1,4 +1,4 @@
-<FluentTimePicker @bind-Value="@SelectedValue" />
+<FluentTimePicker @bind-Value="@SelectedValue" Label="Meeting time:" />
 <p>Selected Time: @(SelectedValue?.ToString("HH:mm"))</p>
 
 @code

diff --git a/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor b/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor
@@ -1,7 +1,7 @@
 @inject DataSource Data
 
-<label for="people-listbox">Select a person</label>
 <FluentListbox TOption="Person"
+               Label="Select a person"
                Items="@Data.People"
                Id="people-listbox"
                Height="150px"

diff --git a/examples/Demo/Shared/Pages/Listbox/Examples/ListboxMultiple.razor b/examples/Demo/Shared/Pages/Listbox/Examples/ListboxMultiple.razor
@@ -11,8 +11,8 @@
 </p>
 
 <div style="display: block; height: 320px;">
-    <label for="people-listbox2">Select persons</label>
     <FluentListbox TOption="Person"
+                   Label="Select persons"
                    Items="@Data.People"
                    Id="people-listbox2"
                    Multiple="true"

diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldAria.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldAria.razor
diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor
@@ -1,12 +1,12 @@
 <p>
-    <FluentNumberField @bind-Value="exampleInt">Integer</FluentNumberField>
+    <FluentNumberField @bind-Value="exampleInt" Label="Integer" />
     <br />
     Example int: @exampleInt
     <br />
     Minimum value: @(int.MinValue); Maximum value: @(int.MaxValue)
 </p>
 <p>
-    <FluentNumberField @bind-Value="exampleNullableInt">Nullable integer</FluentNumberField>
+    <FluentNumberField @bind-Value="exampleNullableInt" Label="Nullable integer" />
     <br />
     Example nullable int: @exampleNullableInt
     <br />
@@ -15,14 +15,20 @@
 <p>
     Same as above but bound to oninput event 
     <br />
-    <FluentNumberField @bind-Value="exampleInt2" Appearance="FluentInputAppearance.Filled" @oninput="@(e => Int32.TryParse(e.Value?.ToString(), out exampleInt2))">Integer</FluentNumberField>
+    <FluentNumberField @bind-Value="exampleInt2"
+                       Appearance="FluentInputAppearance.Filled"
+                       @oninput="@(e => Int32.TryParse(e.Value?.ToString(), out exampleInt2))"
+                       Label="Integer" />
     <br />
     Example int: @exampleInt2
 </p>
 <p>
     Nullable int bound to oninput event 
     <br />
-    <FluentNumberField @bind-Value="exampleNullableInt2" Appearance="FluentInputAppearance.Filled" @oninput="@(e => exampleNullableInt2 = int.TryParse(e.Value?.ToString(), out int tmp) ? (int?)tmp : null)">Nullable integer</FluentNumberField>
+    <FluentNumberField @bind-Value="exampleNullableInt2"
+                       Appearance="FluentInputAppearance.Filled"
+                       @oninput="@(e => exampleNullableInt2 = int.TryParse(e.Value?.ToString(), out int tmp) ? (int?)tmp : null)"
+                       Label="Nullable integer" />
     <br />
     Example nullable int: @exampleNullableInt2
 </p>

diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor
@@ -12,12 +12,12 @@
 
 <h4>Disabled</h4>
 <FluentNumberField @bind-Value=value5 Disabled="true"></FluentNumberField>
-<FluentNumberField @bind-Value=value6 Disabled="true">label</FluentNumberField>
+<FluentNumberField @bind-Value=value6 Disabled="true" Label="label"></FluentNumberField>
 <FluentNumberField @bind-Value=value7 Disabled="true" Placeholder="placeholder"></FluentNumberField>
 
 <h4>Read only</h4>
 <FluentNumberField @bind-Value=value8 Readonly="true"></FluentNumberField>
-<FluentNumberField @bind-Value=value9 Readonly="true">label</FluentNumberField>
+<FluentNumberField @bind-Value=value9 Readonly="true" Label="label"></FluentNumberField>
 
 @code {
     int? value1, value2, value3, value4, value5, value6, value7, value8=1, value9=2;

diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor
@@ -1,6 +1,6 @@
 <h4>Default</h4>
 <FluentNumberField @bind-Value=value1 Appearance="FluentInputAppearance.Filled"></FluentNumberField>
-<FluentNumberField @bind-Value=value2 Appearance="FluentInputAppearance.Filled">label</FluentNumberField>
+<FluentNumberField @bind-Value=value2 Appearance="FluentInputAppearance.Filled" Label="label"></FluentNumberField>
 
 <h4>Placeholder</h4>
 <FluentNumberField @bind-Value=value3 Appearance="FluentInputAppearance.Filled" Placeholder="Placeholder"></FluentNumberField>
@@ -12,13 +12,13 @@
 <!-- Disabled -->
 <h4>Disabled</h4>
 <FluentNumberField @bind-Value=value5 Appearance="FluentInputAppearance.Filled" Disabled="true"></FluentNumberField>
-<FluentNumberField @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true">label</FluentNumberField>
+<FluentNumberField @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true" Label="label"></FluentNumberField>
 <FluentNumberField @bind-Value=value7 Appearance="FluentInputAppearance.Filled" Disabled="true" Placeholder="placeholder"></FluentNumberField>
 
 <!-- Read only -->
 <h4>Read only</h4>
 <FluentNumberField @bind-Value=value8 Appearance="FluentInputAppearance.Filled" Readonly="true"></FluentNumberField>
-<FluentNumberField @bind-Value=value9 Appearance="FluentInputAppearance.Filled" Readonly="true">label</FluentNumberField>
+<FluentNumberField @bind-Value=value9 Appearance="FluentInputAppearance.Filled" Readonly="true" Label="label"></FluentNumberField>
 
 @code {
     int? value1, value2, value3, value4, value5, value6, value7, value8=3, value9=4;

diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor
@@ -1,11 +1,11 @@
-<h4>With start</h4>
-<FluentNumberField @bind-Value=value1>
+<h4>Icons</h4>
+
+<FluentNumberField @bind-Value="value1" Label="With start">
     <FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="start" />  
 </FluentNumberField>
 
 
-<h4>With end</h4>
-<FluentNumberField @bind-Value=value2>
+<FluentNumberField @bind-Value="value2" Label="With end">
     <FluentIcon Icon="Icons.Regular.Size16.Globe" Color="@Color.Neutral" Slot="end" />  
 </FluentNumberField>
 

diff --git a/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor b/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor
@@ -40,5 +40,3 @@
 
 <DemoSection Title="Filled Appearance" Component="@typeof(NumberFieldFilled)"></DemoSection>
 
-<DemoSection Title="Aria label" Component="@typeof(NumberFieldAria)"></DemoSection>
-
diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor
@@ -1,14 +1,11 @@
 <h4>Visual vs audio label</h4>
 <FluentRadioGroup @bind-Value=value1>
-    <FluentRadio>
-        <span aria-label="Audio label">Visible label</span>
-    </FluentRadio>
+    <FluentRadio Label="Visible label" />
 </FluentRadioGroup>
 
 <div style="display: flex; flex-direction: column; margin-top: 12px;">
-    <FluentRadioGroup @bind-Value=value2>
-        <label id="label1">Outside label</label>
-        <FluentRadio aria-labelledby="label1"></FluentRadio>
+    <FluentRadioGroup @bind-Value="value2" Label="Outside label">
+        <FluentRadio Label="label1"></FluentRadio>
     </FluentRadioGroup>
 </div>
 @code {

diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor
@@ -1,5 +1,5 @@
-<p>Without a label: <FluentRadioGroup @bind-Value=value1><FluentRadio></FluentRadio></FluentRadioGroup></p>
-<p>With a label: <FluentRadioGroup @bind-Value=value2><FluentRadio>label</FluentRadio></FluentRadioGroup></p>
+<p>Without a label: <FluentRadioGroup @bind-Value=value1><FluentRadio AriaLabel="Radio without label"></FluentRadio></FluentRadioGroup></p>
+<p>With a label: <FluentRadioGroup @bind-Value=value2><FluentRadio Label="label"></FluentRadio></FluentRadioGroup></p>
 
 @code {
     string? value1,value2;

diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor
@@ -1,18 +1,18 @@
 <h4>Checked</h4>
 <FluentRadioGroup @bind-Value=v1 Name="checkedstate">
-    <FluentRadio Name="checkedstate" Value=@("checked") Checked="true"></FluentRadio>
+    <FluentRadio Name="checkedstate" AriaLabel="Checked" Value=@("checked") Checked="true"></FluentRadio>
 </FluentRadioGroup>
 
 <h4>Required</h4>
 <FluentRadioGroup @bind-Value=v2>
-    <FluentRadio Value=@("required") Required="true"></FluentRadio>
+    <FluentRadio Value=@("required") AriaLabel="Required" Required="true"></FluentRadio>
 </FluentRadioGroup>
 
 <h4>Disabled</h4>
 <FluentRadioGroup @bind-Value=v3>
-    <FluentRadio Disabled="true"></FluentRadio>
-    <FluentRadio Disabled="true">label</FluentRadio>
-    <FluentRadio Disabled="true" Checked="true">checked</FluentRadio>
+    <FluentRadio Disabled="true" AriaLabel="Empty check"></FluentRadio>
+    <FluentRadio Disabled="true" Label="label"></FluentRadio>
+    <FluentRadio Disabled="true" Checked="true" Label="checked"></FluentRadio>
 </FluentRadioGroup>
 @code {
     string? v1, v2, v3;

diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor
@@ -1,19 +1,13 @@
 <div>
-    <FluentRadioGroup Name="numbers" @bind-Value=value1>
-        <label style="color: --var(neutral-foreground-rest);" slot="label">
-            Numbers
-        </label>
+    <FluentRadioGroup Name="numbers" @bind-Value=value1 Label="Numbers">
         <FluentRadio Value=@("one")>One</FluentRadio>
         <FluentRadio Value=@("two")>Two</FluentRadio>
     </FluentRadioGroup>
 </div>
 
 <h4>Single radio</h4>
 <div style="display: flex; flex-direction: column; margin-top: 12px;">
-    <FluentRadioGroup @bind-Value=value2 Name="players">
-        <label style="color: --var(neutral-foreground-rest);" slot="label">
-            Best basketball players
-        </label>
+    <FluentRadioGroup @bind-Value=value2 Name="players" Label="Best basketball players">
         <FluentRadio Value=@("airjordan")>Michael Jordan</FluentRadio>
     </FluentRadioGroup>
 </div>

diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor
@@ -1,6 +1,5 @@
 <h4>Preset value</h4>
-<FluentRadioGroup @bind-Value="pilot" Name="best-pilot">
-        <label id="label4" slot="label">Preset selected-value</label>
+<FluentRadioGroup @bind-Value="pilot" Name="best-pilot" Label="Preset selected-value">
         <FluentRadio Value="@("ice-man")">Ice Man</FluentRadio>
         <FluentRadio Value="@("maverick")">Maverick</FluentRadio>
         <FluentRadio Value="@("viper")">Viper</FluentRadio>

diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor
@@ -1,18 +1,16 @@
 <h4>Readonly</h4>
 <div style="display: flex; flex-direction: column; margin-top: 12px;">
-    <label id="label3">readonly radio group</label>
-    <FluentRadioGroup Readonly=true aria-labelledby="label3" Name="office" @bind-Value=value1>
-        <FluentRadio Value=@("word")>Word</FluentRadio>
-        <FluentRadio Value=@("excel")>Excel</FluentRadio>
+    <FluentRadioGroup Readonly=true Label="readonly radio group" Name="office" @bind-Value=value1>
+        <FluentRadio Value=@("word") Label="Word" />
+        <FluentRadio Value=@("excel") Label="Excel" />
     </FluentRadioGroup>
 </div>
 
 <h4>Disabled</h4>
 <div style="display: flex; flex-direction: column; margin-top: 12px;">
-    <label id="label2">Disabled radio group</label>
-    <FluentRadioGroup Disabled=true aria-labelledby="label2" Name="cars" @bind-Value=value2>
-        <FluentRadio Value=@("lambo")>Lamborghini</FluentRadio>
-        <FluentRadio Value=@("ferari")>Ferari</FluentRadio>
+    <FluentRadioGroup Disabled=true Label="Disabled radio group" Name="cars" @bind-Value=value2>
+        <FluentRadio Value=@("lambo") Label="Lamborghini" />
+        <FluentRadio Value=@("ferari") Label="Ferari" />
     </FluentRadioGroup>
 </div>
 @code {

diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor
diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor
@@ -1,8 +1,8 @@
-<div style="display: flex; align-items: center; gap: 10px; margin: 1em 0;">
-    Without a label: <FluentSearch @bind-Value=value></FluentSearch>
+<div>
+    Without a label: <FluentSearch @bind-Value=value AriaLabel="Search"/>
 </div>
-<div style="display: flex; align-items: center; gap: 10px; margin: 1em 0;">
-    With a label: <FluentSearch @bind-Value=value>Label</FluentSearch>
+<div>
+    <FluentSearch @bind-Value=value Label="With a label" />
 </div>
 @code {
     string? value;

diff --git a/examples/Demo/Shared/Pages/Search/SearchPage.razor b/examples/Demo/Shared/Pages/Search/SearchPage.razor
@@ -32,6 +32,4 @@
 
 <DemoSection Title="Filled style" Component="@typeof(SearchAppearanceFilled)"></DemoSection>
 
-<DemoSection Title="Aria" Component="@typeof(SearchAria)"></DemoSection>
-
 <DemoSection Title="Miscelaneous" Component="@typeof(SearchMisc)"></DemoSection>
diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor b/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor
@@ -1,6 +1,6 @@
 @inject DataSource Data
-<label for="people-listbox">Select a person</label>
 <FluentSelect TOption="Person"
+              Label="Select a person"
               Items="@Data.People.WithVeryLongName()"
               Id="people-listbox"
               Width="200px"

diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectMultiple.razor b/examples/Demo/Shared/Pages/Select/Examples/SelectMultiple.razor
@@ -1,8 +1,8 @@
 @inject DataSource Data
 
 <div style="display: block; height: 300px;">
-<label for="people-listbox2">Select people: </label>
 <FluentSelect TOption="Person"
+              Label="Select people:"
               Items="@Data.People"
               Id="people-listbox2"
               Multiple="true"

diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor b/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor
@@ -4,8 +4,8 @@
 <p>All people with a birth year greater than 1990 are disabled through the <code>OptionDisabled</code> (Func delegate) parameter.</p>
 
 <div style="display: block; height: 300px;">
-    <label for="people-listbox2">Select persons</label>
     <FluentSelect TOption="Person"
+                  Label="Select persons"
                   Items="@Data.People"
                   Id="people-listbox2"
                   Multiple="true"

diff --git a/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor b/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor
@@ -1,6 +1,6 @@
 <div style="margin-bottom: 60px;">
     <FluentButton style="width: 90px; margin: 10px;" @onclick="() => orientation = (orientation == Orientation.Vertical) ? Orientation.Horizontal : Orientation.Vertical">Toggle orientation</FluentButton>
-    <FluentSlider Orientation="@orientation" Min="0" Max="100" Step="10" @bind-Value=value>
+    <FluentSlider Label="Select a temperature" Orientation="@orientation" Min="0" Max="100" Step="10" @bind-Value=value>
         <FluentSliderLabel Position="0">0&#8451;</FluentSliderLabel>
         <FluentSliderLabel Position="10">10&#8451;</FluentSliderLabel>
         <FluentSliderLabel Position="90">90&#8451;</FluentSliderLabel>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,5 +15,3 @@
		<DemoSection Title="Default checkbox examples" Component="@typeof(CheckboxDefault)"></DemoSection>

		<DemoSection Title="Vertical checkboxes" Component="@typeof(CheckboxVertical)"></DemoSection>

		<DemoSection Title="Visual vs audio label" Component="@typeof(CheckboxAria)"></DemoSection>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,5 +40,3 @@

		<DemoSection Title="Filled Appearance" Component="@typeof(NumberFieldFilled)"></DemoSection>

		<DemoSection Title="Aria label" Component="@typeof(NumberFieldAria)"></DemoSection>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,6 +32,4 @@

		<DemoSection Title="Filled style" Component="@typeof(SearchAppearanceFilled)"></DemoSection>

		<DemoSection Title="Aria" Component="@typeof(SearchAria)"></DemoSection>

		<DemoSection Title="Miscelaneous" Component="@typeof(SearchMisc)"></DemoSection>