flowbite-mcp 1.1.3 → 1.1.5

package/data/forms/checkbox.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Checkbox - Flowbite
-description: Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors
-group: forms
-toc: true
-requires_js: true
-
-previous: Textarea
-previousLink: forms/textarea/
-next: Radio
-nextLink: forms/radio/
----
-
 The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for 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 checkbox component.
@@ -20,7 +6,7 @@ Make sure that you have included Flowbite as a plugin inside your Tailwind CSS p
 
 Use this default example of a checkbox element in a checked and unchecked state.
 
-{{< example github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex items-center mb-4">
     <input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="default-checkbox" class="select-none ms-2 text-sm font-medium text-heading">Default checkbox</label>
@@ -29,13 +15,13 @@ Use this default example of a checkbox element in a checked and unchecked state.
     <input checked id="checked-checkbox" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="checked-checkbox" class="select-none ms-2 text-sm font-medium text-heading">Checked state</label>
 </div>
-{{< /example >}}
+```
 
 ## Disabled state
 
 This example can be used for the disabled state of the checkbox component by applying the `disabled` attribute to the input element.
 
-{{< example github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex items-center mb-4">
     <input disabled id="disabled-checkbox" type="checkbox" value="" class="w-4 h-4 border border-light rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="disabled-checkbox" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled checkbox</label>
@@ -44,24 +30,24 @@ This example can be used for the disabled state of the checkbox component by app
     <input disabled checked id="disabled-checked-checkbox" type="checkbox" value="" class="w-4 h-4 border border-light rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="disabled-checked-checkbox" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled checked</label>
 </div>
-{{< /example >}}
+```
 
 ## Checkbox link
 
 Use this example if you want to add an anchor link inside the label of the checkbox component.
 
-{{< example github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex items-center">
     <input id="link-checkbox" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="link-checkbox" class="select-none ms-2 text-sm font-medium text-heading">I agree with the <a href="#" class="text-fg-brand hover:underline">terms and conditions</a>.</label>
 </div>
-{{< /example >}}
+```
 
 ## Helper text
 
 Get started with this example if you want to add a secondary helper text for the checkbox component.
 
-{{< example github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex">
     <div class="flex items-center h-5">
         <input id="helper-checkbox" aria-describedby="helper-checkbox-text" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
@@ -71,13 +57,13 @@ Get started with this example if you want to add a secondary helper text for the
         <p id="helper-checkbox-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 of a checkbox inside a card element to enable a larger area of clicking activation.
 
-{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex items-center ps-4 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <input id="bordered-checkbox-1" type="checkbox" value="" name="bordered-checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="bordered-checkbox-1" class="select-none w-full py-4 ms-2 text-sm font-medium text-heading">Default checkbox</label>
@@ -86,13 +72,13 @@ Use this example of a checkbox inside a card element to enable a larger area of
     <input checked id="bordered-checkbox-2" type="checkbox" value="" name="bordered-checkbox" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="bordered-checkbox-2" class="select-none w-full py-4 ms-2 text-sm font-medium text-heading">Checked state</label>
 </div>
-{{< /example >}}
+```
 
 ## Bordered with description
 
 Use this checkbox component with a bordered style and a description text.
 
-{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <input id="bordered-checkbox-3" type="checkbox" value="" name="bordered-checkbox" class="w-4 h-4 mt-4 ms-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
     <label for="bordered-checkbox-3" class="py-4 pe-4">
@@ -107,13 +93,13 @@ Use this checkbox component with a bordered style and a description text.
         <p id="helper-checkbox-bordered-2" class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
     </label>
 </div>
-{{< /example >}}
+```
 
 ## Bordered with icon
 
 This example can be used to create a checkbox component with a bordered style, a description text and an icon.
 
-{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <label for="bordered-checkbox-5" class="p-4">
         <svg class="w-7 h-7 text-body mb-1.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="M5 12a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1M5 12h14M5 12a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1m-2 3h.01M14 15h.01M17 9h.01M14 9h.01"/></svg>
@@ -130,14 +116,14 @@ This example can be used to create a checkbox component with a bordered style, a
     </label>
     <input id="bordered-checkbox-6" type="checkbox" value="" name="bordered-checkbox" class="w-4 h-4 mt-4 me-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
 </div>
-{{< /example >}}
+```
 
 
 ## Checkbox list group
 
 Use this example to show a list of checkbox items grouped inside a card.
 
-{{< example github="components/radio.md" show_dark=true >}}
+```html
 <h3 class="mb-4 font-semibold text-heading">Technology</h3>
 <ul class="w-48 select-none text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base">
     <li class="w-full border-b border-default rounded-t-lg">
@@ -165,13 +151,13 @@ Use this example to show a list of checkbox items grouped inside a card.
         </div>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Horizontal list group
 
 Use this example to show a list of checkbox items inside a card horizontally.
 
-{{< example github="components/radio.md" show_dark=true >}}
+```html
 <h3 class="mb-4 font-semibold text-heading">Identification</h3>
 <ul class="items-center select-none w-full text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base sm:flex">
     <li class="w-full border-b border-default sm:border-b-0 sm:border-r">
@@ -199,17 +185,15 @@ Use this example to show a list of checkbox items inside a card horizontally.
         </div>
     </li>
 </ul>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Checkbox dropdown
 
 Use this example to show a list of checkbox items inside a dropdown menu.
 
-{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="430" >}}
+```html
 <button id="dropdownSearchButton" data-dropdown-toggle="dropdownSearch" type="button" class="inline-flex items-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">
     Dropdown search
     <svg class="w-4 h-4 ms-1.5 -me-1" 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>
@@ -276,13 +260,13 @@ Use this example to show a list of checkbox items inside a dropdown menu.
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Inline layout
 
 You can align the checkbox elements horizontally by using a wrapper tag and applying the `flex` class.
 
-{{< example github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex">
     <div class="flex items-center me-4">
         <input id="inline-checkbox" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
@@ -301,13 +285,13 @@ You can align the checkbox elements horizontally by using a wrapper tag and appl
         <label for="inline-disabled-checkbox" class="select-none ms-2 text-sm font-medium text-fg-disabled">Inline disabled</label>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Colors
 
 Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the checkbox component.
 
-{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+```html
 <div class="flex items-center me-4">
     <input checked id="red-checkbox" type="checkbox" value="" class="w-4 h-4 text-red-600 bg-neutral-secondary-medium border-default-medium rounded-xs focus:ring-red-500 dark:focus:ring-red-600 ring-offset-neutral-primary focus:ring-2">
     <label for="red-checkbox" class="select-none ms-2 text-sm font-medium text-heading">Red</label>
@@ -332,13 +316,13 @@ Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of
     <input checked id="orange-checkbox" type="checkbox" value="" class="w-4 h-4 text-orange-500 bg-neutral-secondary-medium border-default-medium rounded-xs focus:ring-orange-500 dark:focus:ring-orange-600 ring-offset-neutral-primary focus:ring-2">
     <label for="orange-checkbox" class="select-none ms-2 text-sm font-medium text-heading">Orange</label>
 </div>
-{{< /example >}}
+```
 
 ## Advanced layout
 
 Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.
 
-{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+```html
 <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>
@@ -372,4 +356,4 @@ Use this example of an advanced layout of checkbox elements where the label pare
         </label>
     </li>
 </ul>
-{{< /example >}}
+```

package/data/forms/file-input.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS File Input - Flowbite
-description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
-group: forms
-toc: true
-requires_js: true
-
-previous: Input Field
-previousLink: forms/input-field/
-next: Search Input
-nextLink: forms/search-input/
----
-
 The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for 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 file input component.
@@ -20,48 +6,48 @@ Make sure that you have included Flowbite as a plugin inside your Tailwind CSS p
 
 Get started with a simple file input component to let users upload one single file.
 
-{{< example github="forms/file-input.md" show_dark=true >}}
+```html
 <label class="block mb-2.5 text-sm font-medium text-heading" for="file_input">Upload file</label>
 <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" id="file_input" type="file">
-{{< /example >}}
+```
 
 ## Helper text
 
 Add a descriptive helper text to inform users the allowed extensions and sizes of the files.
 
-{{< example github="forms/file-input.md" show_dark=true >}}
+```html
 <label class="block mb-2.5 text-sm font-medium text-heading" for="file_input">Upload file</label>
 <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" aria-describedby="file_input_help" id="file_input" type="file">
 <p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
-{{< /example >}}
+```
 
 ## Multiple files
 
 Apply the `multiple` attribute to the file input component to allow more files to be uploaded.
 
-{{< example github="forms/file-input.md" show_dark=true >}}
+```html
 <label class="block mb-2.5 text-sm font-medium text-heading" for="multiple_files">Upload multiple files</label>
 <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" id="multiple_files" type="file" multiple>
-{{< /example >}}
+```
 
 ## Sizes
 
 Choose from the small, default, and large file input sizing options.
 
-{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}
+```html
 <label class="block mb-2.5 text-sm font-medium text-heading" for="small_size">Base file input</label>
 <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" id="small_size" type="file">
 
 
 <label class="block mb-2.5 text-sm font-medium text-heading" for="large_size">Large file input</label>
 <input class="cursor-pointer bg-neutral-secondary-medium border border-default-medium text-heading text-lg rounded-base focus:ring-brand focus:border-brand block w-full shadow-xs placeholder:text-body" id="large_size" type="file">
-{{< /example >}}
+```
 
 ## Dropzone
 
 The dropzone file input component can be used to upload one or more files by clicking anywhere in the area.
 
-{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}
+```html
 <div class="flex items-center justify-center w-full">
     <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 bg-neutral-secondary-medium border border-dashed border-default-strong rounded-base cursor-pointer hover:bg-neutral-tertiary-medium">
         <div class="flex flex-col items-center justify-center text-body pt-5 pb-6">
@@ -72,13 +58,13 @@ The dropzone file input component can be used to upload one or more files by cli
         <input id="dropzone-file" type="file" class="hidden" />
     </label>
 </div> 
-{{< /example >}}
+```
 
 ## Dropzone with button
 
 Use this dropzone component to upload files with a button element.
 
-{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}
+```html
 <div class="flex items-center justify-center w-full">
   <div class="flex flex-col items-center justify-center w-full h-64 bg-neutral-secondary-medium border border-dashed border-default-strong rounded-base">
     <div class="flex flex-col items-center justify-center text-body pt-5 pb-6">
@@ -95,4 +81,4 @@ Use this dropzone component to upload files with a button element.
   <!-- Hidden File Input (Outside Label) -->
   <input id="dropzone-file-2" type="file" class="hidden" />
 </div>
-{{< /example >}}
+```

package/data/forms/floating-label.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Floating Label - Flowbite
-description: Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes
-group: forms
-toc: true
-
-previous: Range Slider
-previousLink: forms/range/
-next: Headings
-nextLink: typography/headings/
----
-
 The floating label style was first pioneered by Google in its infamous Material UI design system and it's basically a label tag which floats just above the input field when it is being focused or already has content inside.
 
 On this page you will find a three different input field styles including a standard, outlined, and filled style including validation styles and sizes coded with Tailwind CSS and supported for dark mode.
@@ -19,7 +6,7 @@ On this page you will find a three different input field styles including a stan
 
 Get started with the following three styles for the floating label component and use the `label` tag as a visual placeholder using the `peer-placeholder-shown` and `peer-focus` utility classes from Tailwind CSS.
 
-{{< example class="grid items-end w-full gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}
+```html
 <div class="relative">
     <input type="text" id="floating_filled" class="block rounded-t-base px-2.5 pb-2.5 pt-5 w-full text-sm text-heading bg-neutral-secondary-medium border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " />
     <label for="floating_filled" class="absolute text-sm text-body duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
@@ -32,13 +19,13 @@ Get started with the following three styles for the floating label component and
     <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-heading bg-transparent border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " />
     <label for="floating_standard" class="absolute text-sm text-body duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
 </div>
-{{< /example >}}
+```
 
 ## Floating label with icons
 
 Use these examples of floating label input fields with a descriptive [SVG icon](https://flowbite.com/icons/).
 
-{{< example class="grid items-end w-full gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}
+```html
 <div class="relative">
     <input type="text" id="floating_filled" class="block rounded-t-base px-2.5 pb-2.5 pt-5 w-full text-sm text-heading bg-neutral-secondary-medium border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " />
     <label for="floating_filled" class="inline-flex items-center absolute text-sm text-body duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">
@@ -60,13 +47,13 @@ Use these examples of floating label input fields with a descriptive [SVG icon](
     Floating standard
     </label>
 </div>
-{{< /example >}}
+```
 
 ## Disabled state
 
 Apply the `disabled` attribute to the input fields to disallow the user from changing the content.
 
-{{< example class="grid items-end gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}
+```html
 <div class="relative">
     <input type="text" id="disabled_filled" class="block rounded-t-base px-2.5 pb-2.5 pt-5 w-full text-sm text-heading bg-neutral-secondary-medium border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " disabled />
     <label for="disabled_filled" class="absolute text-sm text-fg-disabled duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Disabled filled</label>
@@ -79,13 +66,13 @@ Apply the `disabled` attribute to the input fields to disallow the user from cha
     <input type="text" id="disabled_standard" class="block py-2.5 px-0 w-full text-sm text-heading bg-transparent border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " disabled />
     <label for="disabled_standard" class="absolute text-sm text-fg-disabled duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Disabled standard</label>
 </div>
-{{< /example >}}
+```
 
 ## Validation
 
 Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.
 
-{{< example github="forms/floating-label.md" show_dark=true >}}
+```html
 <!-- Success messages -->
 <div class="grid items-end gap-6 mb-6 md:grid-cols-3">
     <div>
@@ -135,13 +122,13 @@ Use the following examples of input validation for the success and error message
         <p id="standard_error_help" class="mt-2 text-xs text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Sizes
 
 Use the small and default sizes of the floating label input fields from the following example.
 
-{{< example github="forms/floating-label.md" show_dark=true >}}
+```html
 <div class="grid items-end gap-6 mb-6 md:grid-cols-3">
     <div class="relative">
         <input type="text" id="small_filled" class="block rounded-t-base px-2.5 pb-1.5 pt-4 w-full text-sm text-heading bg-neutral-secondary-medium border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " />
@@ -170,16 +157,16 @@ Use the small and default sizes of the floating label input fields from the foll
         <label for="default_standard" class="absolute text-sm text-body duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Default standard</label>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Helper text
 
 Add a helper text in addition to the label if you want to show more information below the input field.
 
-{{< example github="forms/floating-label.md" show_dark=true >}}
+```html
 <div class="relative">
     <input type="text" id="floating_helper" aria-describedby="floating_helper_text" class="block rounded-t-base px-2.5 pb-2.5 pt-5 w-full text-sm text-heading bg-neutral-secondary-medium border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer" placeholder=" " />
     <label for="floating_helper" class="absolute text-sm text-body duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating helper</label>
 </div>
 <p id="floating_helper_text" class="mt-2.5 text-xs text-body">Remember, contributions to this topic should follow our <a href="#" class="text-fg-brand hover:underline">Community Guidelines</a>.</p>
-{{< /example >}}
+```

package/data/forms/input-field.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Input Field - Flowbite
-description: Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types
-group: forms
-toc: true
-
-previous: Video
-previousLink: components/video/
-next: File Input
-nextLink: forms/file-input/
----
-
 The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.
 
 On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.
@@ -19,7 +6,7 @@ On this page you will find all of the input types based on multiple variants, st
 
 Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.
 
-{{< example github="forms/input-field.md" show_dark=true >}}
+```html
 <form>
     <div class="grid gap-6 mb-6 md:grid-cols-2">
         <div>
@@ -67,13 +54,13 @@ Use this example as a generic form element which includes multiple input fields
     </div>
     <button type="submit" class="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">Submit</button>
 </form>
-{{< /example >}}
+```
 
 ## Input sizes
 
 Use the following examples to apply a small, default or large size for the input fields.
 
-{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}
+```html
         <div>
             <label for="visitors" class="block mb-2.5 text-sm font-medium text-heading">Small Input</label>
             <input type="text" id="visitors" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-2.5 py-2 shadow-xs placeholder:text-body" placeholder="" required />
@@ -90,22 +77,22 @@ Use the following examples to apply a small, default or large size for the input
             <label for="visitors" class="block mb-2.5 text-sm font-medium text-heading">Extra Large Input</label>
             <input type="text" id="visitors" class="bg-neutral-secondary-medium border border-default-medium text-heading text-base rounded-base focus:ring-brand focus:border-brand block w-full px-4 py-3.5 shadow-xs placeholder:text-body" placeholder="" required />
         </div>
-{{< /example >}}
+```
 
 ## Disabled state
 
 Get started with this example if you want to apply the disabled state to an input field.
 
-{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}
+```html
 <input type="text" id="disabled-input" aria-label="disabled input" class="bg-neutral-secondary-medium border border-default-medium text-fg-disabled text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="Disabled input" disabled>
 <input type="text" id="disabled-input-2" aria-label="disabled input 2" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" value="Disabled readonly input" disabled readonly>
-{{< /example >}}
+```
 
 ## Validation
 
 Use the following example to apply validation styles for success and error messages.
 
-{{< example github="forms/input-field.md" show_dark=true >}}
+```html
 <div class="mb-6">
   <label for="success" class="block mb-2.5 text-sm font-medium text-fg-success-strong">Your name</label>
   <input type="text" id="success" class="bg-success-soft border border-success-subtle text-fg-success-strong text-sm rounded-base focus:ring-success focus:border-success block w-full px-3 py-2.5 shadow-xs placeholder:text-fg-success-strong" placeholder="Success input">
@@ -116,13 +103,13 @@ Use the following example to apply validation styles for success and error messa
   <input type="text" id="danger" class="bg-danger-soft border border-danger-subtle text-fg-danger-strong text-sm rounded-base focus:ring-danger focus:border-danger block w-full px-3 py-2.5 shadow-xs placeholder:text-fg-danger-strong" placeholder="Error input">
   <p class="mt-2.5 text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
 </div>
-{{< /example >}}
+```
 
 ## Input group
 
 This example can be used to add a descriptive icon or additional text inside the input field.
 
-{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}
+```html
 <label for="input-group-1" class="block mb-2.5 text-sm font-medium text-heading">Your Email</label>
 <div class="relative">
   <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -145,13 +132,13 @@ https://
   </span>
   <input type="text" id="website" class="rounded-none rounded-e-base block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand placeholder:text-body" placeholder="flowbite.com">
 </div>
-{{< /example >}}
+```
 
 ## Helper text
 
 Use this example to show a helper text below the input field for additional explanation and links.
 
-{{< example github="forms/input-field.md" show_dark=true >}}
+```html
 <label for="input-group-1" class="block mb-2.5 text-sm font-medium text-heading">Your Email</label>
 <div class="relative">
   <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -160,13 +147,13 @@ Use this example to show a helper text below the input field for additional expl
   <input type="text" id="input-group-1" class="block w-full ps-9 pe-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="name@flowbite.com">
 </div>
 <p id="helper-text-explanation" class="mt-2.5 text-sm text-body">We’ll never share your details. Read our <a href="#" class="font-medium text-fg-brand hover:underline">Privacy Policy</a>.</p>
-{{< /example >}}
+```
 
 ## Search input
 
 Get started with this example where the submit button is positioned inside the input field.
 
-{{< example github="forms/input-field.md" show_dark=true >}}
+```html
 <form>   
     <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
     <div class="relative">
@@ -177,17 +164,15 @@ Get started with this example where the submit button is positioned inside the i
         <button type="button" class="absolute end-1.5 bottom-1.5 text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded text-xs px-3 py-1.5 focus:outline-none">Search</button>
     </div>
 </form>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Dropdown input
 
 Use this example to show a dropdown menu right next to the input field.
 
-{{< example github="forms/input-field.md" show_dark=true iframeHeight="290" >}}
+```html
 <form>
     <div class="flex shadow-xs rounded-base -space-x-0.5">
         <label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your Email</label>
@@ -219,4 +204,4 @@ Use this example to show a dropdown menu right next to the input field.
         </button>
     </div>
 </form>
-{{< /example >}}
+```