flowbite-mcp 1.0.0

package/data/forms/radio.md

@@ -0,0 +1,315 @@
+---
+layout: docs
+title: Tailwind CSS Radio - Flowbite
+description: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
+group: forms
+toc: true
+requires_js: true
+
+previous: Checkbox
+previousLink: forms/checkbox/
+next: Toggle
+nextLink: forms/toggle/
+---
+
+The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
+
+Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.
+
+## Radio example
+
+Use the default example of a radio component with the checked and unchecked state.
+
+{{< example github="forms/radio.md" show_dark=true >}}
+<div class="flex items-center mb-4">
+    <input id="default-radio-1" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="default-radio-1" class="select-none ms-2 text-sm font-medium text-heading">Default radio</label>
+</div>
+<div class="flex items-center">
+    <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="default-radio-2" class="select-none ms-2 text-sm font-medium text-heading">Checked state</label>
+</div>
+{{< /example >}}
+
+## Disabled state
+
+Apply the `disabled` attribute to the radio component to disallow the selection for the user.
+
+{{< example github="forms/radio.md" show_dark=true >}}
+<div class="flex items-center mb-4">
+    <input disabled id="disabled-radio-1" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="disabled-radio-1" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled radio</label>
+</div>
+<div class="flex items-center">
+    <input disabled checked id="disabled-radio-2" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light bg-neutral-secondary-medium rounded-full checked:border-default-medium focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="disabled-radio-2" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled checked</label>
+</div>
+{{< /example >}}
+
+## Radio link
+
+Use this example if you want to include an anchor tag inside the label of the radio component.
+
+{{< example github="forms/radio.md" show_dark=true >}}
+<div class="flex items-center">
+    <input id="link-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="link-radio" class="select-none ms-2 text-sm font-medium text-heading">Radio button with a <a href="#" class="text-fg-brand hover:underline font-medium">link inside</a>.</label>
+</div>
+{{< /example >}}
+
+## Helper text
+
+Get started with this example if you want to add a secondary text to the label for the radio component.
+
+{{< example github="forms/radio.md" show_dark=true >}}
+<div class="flex">
+    <div class="flex items-center h-5">
+        <input id="helper-radio" aria-describedby="helper-radio-text" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    </div>
+    <div class="ms-2 text-sm select-none">
+        <label for="helper-radio" class="font-medium text-heading mb-1">Free shipping via Flowbite</label>
+        <p id="helper-radio-text" class="text-xs font-normal text-body">For orders shipped from $25 in books or $29 in other categories</p>
+    </div>
+</div>
+{{< /example >}}
+
+## Bordered
+
+Use this example to show a radio input elements inside a card with border.
+
+{{< example class="grid gap-6 md:grid-cols-2" github="forms/radio.md" show_dark=true >}}
+<div class="flex items-center ps-4 border border-default bg-neutral-primary-soft rounded-base">
+    <input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="bordered-radio-1" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Default radio</label>
+</div>
+<div class="flex items-center ps-4 border border-default bg-neutral-primary-soft rounded-base">
+    <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+    <label for="bordered-radio-2" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Checked state</label>
+</div>
+{{< /example >}}
+
+## Radio list group
+
+This example can be used to show a list of radio buttons inside a grouped list.
+
+{{< example github="components/radio.md" show_dark=true >}}
+<h3 class="mb-4 font-semibold text-heading">Identification</h3>
+<ul class="w-48 bg-neutral-primary-soft border border-default rounded-base">
+    <li class="w-full border-b border-default">
+        <div class="flex items-center ps-3">
+            <input id="list-radio-license" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="list-radio-license" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">Driver License </label>
+        </div>
+    </li>
+    <li class="w-full border-b border-default">
+        <div class="flex items-center ps-3">
+            <input id="list-radio-id" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="list-radio-id" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">State ID</label>
+        </div>
+    </li>
+    <li class="w-full border-b border-default">
+        <div class="flex items-center ps-3">
+            <input id="list-radio-military" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="list-radio-military" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Military</label>
+        </div>
+    </li>
+    <li class="w-full border-b border-default">
+        <div class="flex items-center ps-3">
+            <input id="list-radio-passport" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="list-radio-passport" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Passport</label>
+        </div>
+    </li>
+</ul>
+{{< /example >}}
+
+## Horizontal list group
+
+Use this example to group up radio button components inside a list.
+
+{{< example github="components/radio.md" show_dark=true >}}
+<h3 class="mb-4 font-semibold text-heading">Identification</h3>
+<ul class="items-center w-full text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-lg sm:flex">
+    <li class="w-full border-b border-default sm:border-b-0 sm:border-r">
+        <div class="flex items-center ps-3">
+            <input id="horizontal-list-radio-license" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="horizontal-list-radio-license" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">Driver License </label>
+        </div>
+    </li>
+    <li class="w-full border-b border-default sm:border-b-0 sm:border-r">
+        <div class="flex items-center ps-3">
+            <input id="horizontal-list-radio-id" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="horizontal-list-radio-id" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">State ID</label>
+        </div>
+    </li>
+    <li class="w-full border-b border-default sm:border-b-0 sm:border-r">
+        <div class="flex items-center ps-3">
+            <input id="horizontal-list-radio-military" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="horizontal-list-radio-military" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Military</label>
+        </div>
+    </li>
+    <li class="w-full">
+        <div class="flex items-center ps-3">
+            <input id="horizontal-list-radio-passport" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+            <label for="horizontal-list-radio-passport" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Passport</label>
+        </div>
+    </li>
+</ul>
+{{< /example >}}
+
+<div class="mt-8 -mb-5">
+  {{< requires_js >}}
+</div>
+
+## Radio in dropdown
+
+Here's an example of a list group that you can use right away.
+
+{{< example class="flex justify-center" github="components/radio.md" show_dark=true iframeHeight="370" >}}
+<button id="dropdownHelperRadioButton" data-dropdown-toggle="dropdownHelperRadio" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
+  Dropdown button 
+  <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
+</button>
+
+<!-- Dropdown menu -->
+<div id="dropdownHelperRadio" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-56" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top">
+    <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownHelperRadioButton">
+      <li>
+        <div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
+          <div class="flex items-center h-5">
+              <input id="helper-radio-4" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+          </div>
+          <div class="ms-2 text-sm">
+              <label for="helper-radio-4" class="select-none font-medium text-heading">
+                <div class="mb-1">Individual</div>
+                <p id="helper-radio-text-4" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
+              </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
+          <div class="flex items-center h-5">
+              <input id="helper-radio-5" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+          </div>
+          <div class="ms-2 text-sm">
+              <label for="helper-radio-5" class="select-none font-medium text-heading">
+                <div class="mb-1">Company</div>
+                <p id="helper-radio-text-5" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
+              </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
+          <div class="flex items-center h-5">
+              <input id="helper-radio-6" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+          </div>
+          <div class="ms-2 text-sm">
+              <label for="helper-radio-6" class="select-none font-medium text-heading">
+                <div class="mb-1">Non profit</div>
+                <p id="helper-radio-text-6" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
+              </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+</div>
+{{< /example >}}
+
+## Inline layout
+
+Use the `flex` class for a wrapper element to horizontally align the radio elements.
+
+{{< example github="forms/radio.md" show_dark=true >}}
+<div class="flex">
+    <div class="flex items-center me-4">
+        <input id="inline-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+        <label for="inline-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline 1</label>
+    </div>
+    <div class="flex items-center me-4">
+        <input id="inline-2-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+        <label for="inline-2-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline 2</label>
+    </div>
+    <div class="flex items-center me-4">
+        <input checked id="inline-checked-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+        <label for="inline-checked-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline checked</label>
+    </div>
+    <div class="flex items-center">
+        <input disabled id="inline-disabled-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
+        <label for="inline-disabled-radio" class="select-none ms-2 text-sm font-medium text-fg-disabled">Inline disabled</label>
+    </div>
+</div>
+{{< /example >}}
+
+## Advanced layout
+
+Use this example of a more advanced radio component to add more information and update the style of the whole card instead of just the circled dot.
+
+{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+<h3 class="mb-5 text-lg font-medium text-gray-900 dark:text-white">How much do you expect to use each month?</h3>
+<ul class="grid w-full gap-6 md:grid-cols-2">
+    <li>
+        <input type="radio" id="hosting-small" name="hosting" value="hosting-small" class="hidden peer" required />
+        <label for="hosting-small" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">                           
+            <div class="block">
+                <div class="w-full font-semibold">0-50 MB</div>
+                <div class="w-full">Good for small websites</div>
+            </div>
+            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </label>
+    </li>
+    <li>
+        <input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
+        <label for="hosting-big" class="inline-flex items-center justify-between w-full w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
+            <div class="block">
+                <div class="w-full font-semibold">500-1000 MB</div>
+                <div class="w-full">Good for large websites</div>
+            </div>
+            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </label>
+    </li>
+</ul>
+
+{{< /example >}}
+
+## Advanced layout with icons
+
+Use this example to show an advanced layout of radio button elements with icons.
+
+{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+<h3 class="mb-4 text-lg font-medium text-heading">Choose technology:</h3>
+<ul class="select-none grid w-full gap-4 md:grid-cols-3">
+    <li>
+        <input type="radio" id="react-option" value="react-option" name="technologies" class="hidden peer" required="" checked>
+        <label for="react-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">                           
+            <div class="block">
+                <svg class="mb-2 w-7 h-7 text-sky-600" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"/></svg>
+                <div class="w-full font-medium mb-1">React Js</div>
+                <div class="w-full text-sm">A JavaScript library for building user interfaces.</div>
+            </div>
+        </label>
+    </li>
+    <li>
+        <input type="radio" id="vue-option" value="vue-option" name="technologies" class="hidden peer">
+        <label for="vue-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
+            <div class="block">
+                <svg class="mb-2 text-success w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z"/></svg>
+                <div class="w-full font-medium mb-1">Vue Js</div>
+                <div class="w-full text-sm">An model–view front end JavaScript framework.</div>
+            </div>
+        </label>
+    </li>
+    <li>
+        <input type="radio" id="angular-option" value="angular-option" name="technologies" class="hidden peer">
+        <label for="angular-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
+            <div class="block">
+                <svg class="mb-2 text-danger w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/></svg>
+                <div class="w-full font-medium mb-1">Angular</div>
+                <div class="w-full text-sm">A TypeScript-based web application framework.</div>
+            </div>
+        </label>
+    </li>
+</ul>
+
+{{< /example >}}
+

package/data/forms/range.md

@@ -0,0 +1,83 @@
+---
+layout: docs
+title: Tailwind CSS Range Slider - Flowbite
+description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
+group: forms
+toc: true
+requires_js: true
+
+previous: Toggle
+previousLink: forms/toggle/
+next: Floating Label
+nextLink: forms/floating-label/
+---
+
+The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.
+
+The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings.
+
+## Range slider example
+
+Get started with this default example with values from 1 to 100 and the default value of 50.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<label for="default-range" class="block mb-2.5 text-sm font-medium text-heading">Default range</label>
+<input id="default-range" type="range" value="50" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
+{{< /example >}}
+
+## Disabled state
+
+Apply the `disabled` class to disallow the users from further selecting values.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<label for="disabled-range" class="block mb-2.5 text-sm font-medium text-heading">Default range</label>
+<input id="disabled-range" type="range" value="50" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer" disabled>
+{{< /example >}}
+
+## Min and max
+
+Use the min and max attributes on the range component to set the limits of the range values.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<label for="minmax-range" class="block mb-2.5 text-sm font-medium text-heading">Min-max range</label>
+<input id="minmax-range" type="range" min="0" max="10" value="5" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
+{{< /example >}}
+
+## Steps
+
+Use the step attribute on the range component to set the increment with which the values will change.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<label for="steps-range" class="block mb-2.5 text-sm font-medium text-heading">Range steps</label>
+<input id="steps-range" type="range" min="0" max="5" value="2.5" step="0.5" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
+{{< /example >}}
+
+## Sizes
+
+Apply the small, default, and large sizes for the range component by applying the `range-sm` and `range-lg` utility classes from Flowbite and Tailwind CSS.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<label for="small-range" class="block mb-2.5 text-sm font-medium text-heading">Small range</label>
+<input id="small-range" type="range" value="50" class="w-full h-1 mb-6 bg-neutral-quaternary rounded-full appearance-none cursor-pointer range-sm">
+
+<label for="medium-range" class="block mb-2.5 text-sm font-medium text-heading">Default range</label>
+<input id="medium-range" type="range" value="50" class="w-full h-2 mb-6 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
+
+<label for="large-range" class="block mb-2.5 text-sm font-medium text-heading">Large range</label>
+<input id="large-range" type="range" value="50" class="w-full h-3 bg-neutral-quaternary rounded-full appearance-none cursor-pointer range-lg">
+{{< /example >}}
+
+## Labels
+
+Use the following example to add labels to each value milestone of the range slider component.
+
+{{< example github="forms/range.md" show_dark=true >}}
+<div class="relative mb-6">
+    <label for="labels-range-input" class="sr-only">Labels range</label>
+    <input id="labels-range-input" type="range" value="1000" min="100" max="1500" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
+    <span class="text-sm text-body absolute start-0 -bottom-6">Min ($100)</span>
+    <span class="text-sm text-body absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$500</span>
+    <span class="text-sm text-body absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$1000</span>
+    <span class="text-sm text-body absolute end-0 -bottom-6">Max ($1500)</span>
+</div>
+{{< /example >}}