flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/forms/select.md

@@ -0,0 +1,194 @@
+---
+layout: formLayout
+title: Svelte Select - Flowbite
+breadcrumb_title: Select
+dir: Forms
+description: Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+
+import { Breadcrumb, BreadcrumbItem, Badge, Heading, A } from '$lib'
+import { props as items } from '../props/Select.json'
+let propHeader = ['Name', 'Type', 'Default']
+let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="forms/Select.svelte">Select</GitHubSource>
+</ExampleDiv>
+
+The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Select } from 'flowbite-svelte'
+</script>
+```
+
+<Htwo label="Select input example" />
+
+Get started with the default example of a select input component to get a single option selection.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte'
+  let selected;
+  let countries = [
+    {value:"us", name: "United States"},
+    {value:"ca", name: "Canada"},
+    {value:"fr", name: "France"},
+  ]
+</script>
+
+<Label>Select an option
+  <Select class="mt-2" items={countries} bind:value={selected} />
+</Label>
+```
+
+<Htwo label="Disabled state" />
+
+Apply the disable state to the select component to disallow the selection of new options.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte'
+  let countries = [
+    {value:"us", name: "United States"},
+    {value:"ca", name: "Canada"},
+    {value:"fr", name: "France"},
+  ]
+</script>
+
+<Label for="select-disabled" class="mb-2">Disabled select</Label>
+<Select id="select-disabled" disabled items={countries} placeholder="You can't select anything..." />
+```
+
+<Htwo label="Underline select" />
+
+Use the underline style for the select component as an alternative appearance.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte'
+  let countries = [
+    {value:"us", name: "United States"},
+    {value:"ca", name: "Canada"},
+    {value:"fr", name: "France"},
+  ]
+</script>
+
+<Label for="select-underline" class="sr-only">Underline select</Label>
+<Select id="select-underline" underline class="mt-2" items={countries} />
+```
+
+<Htwo label="Select with dropdown" />
+
+Use this example if you want to create a multi-level dropdown and select component combination.
+
+```svelte example
+<script>
+  import { Select, Dropdown, DropdownItem, ChevronDown } from 'flowbite-svelte'
+  let countries = [
+    {value:"us", name: "United States"},
+    {value:"ca", name: "Canada"},
+    {value:"fr", name: "France"},
+  ]
+  let states = [
+    {value:"CA", name:"California"},
+    {value:"TX", name:"Texas"},
+    {value:"WH", name:"Washinghton"},
+    {value:"FL", name:"Florida"},
+    {value:"VG", name:"Virginia"},
+    {value:"GE", name:"Georgia"},
+    {value:"MI", name:"Michigan"}
+  ]
+</script>
+
+<div class="flex">
+    <button id="states-button" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
+    <svg aria-hidden="true" class="mr-2 h-3" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" width="14" height="12" rx="2" fill="white"/><mask id="mask0_12694_49953" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="12"><rect x="0.5" width="14" height="12" rx="2" fill="white"/></mask><g mask="url(#mask0_12694_49953)"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 0H0.5V0.8H14.5V0ZM14.5 1.6H0.5V2.4H14.5V1.6ZM0.5 3.2H14.5V4H0.5V3.2ZM14.5 4.8H0.5V5.6H14.5V4.8ZM0.5 6.4H14.5V7.2H0.5V6.4ZM14.5 8H0.5V8.8H14.5V8ZM0.5 9.6H14.5V10.4H0.5V9.6ZM14.5 11.2H0.5V12H14.5V11.2Z" fill="#D02F44"/><rect x="0.5" width="6" height="5.6" fill="#46467F"/><g filter="url(#filter0_d_12694_49953)"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.83317 1.20005C1.83317 1.42096 1.68393 1.60005 1.49984 1.60005C1.31574 1.60005 1.1665 1.42096 1.1665 1.20005C1.1665 0.979135 1.31574 0.800049 1.49984 0.800049C1.68393 0.800049 1.83317 0.979135 1.83317 1.20005ZM3.1665 1.20005C3.1665 1.42096 3.01727 1.60005 2.83317 1.60005C2.64908 1.60005 2.49984 1.42096 2.49984 1.20005C2.49984 0.979135 2.64908 0.800049 2.83317 0.800049C3.01727 0.800049 3.1665 0.979135 3.1665 1.20005ZM4.1665 1.60005C4.3506 1.60005 4.49984 1.42096 4.49984 1.20005C4.49984 0.979135 4.3506 0.800049 4.1665 0.800049C3.98241 0.800049 3.83317 0.979135 3.83317 1.20005C3.83317 1.42096 3.98241 1.60005 4.1665 1.60005ZM5.83317 1.20005C5.83317 1.42096 5.68393 1.60005 5.49984 1.60005C5.31574 1.60005 5.1665 1.42096 5.1665 1.20005C5.1665 0.979135 5.31574 0.800049 5.49984 0.800049C5.68393 0.800049 5.83317 0.979135 5.83317 1.20005ZM2.1665 2.40005C2.3506 2.40005 2.49984 2.22096 2.49984 2.00005C2.49984 1.77913 2.3506 1.60005 2.1665 1.60005C1.98241 1.60005 1.83317 1.77913 1.83317 2.00005C1.83317 2.22096 1.98241 2.40005 2.1665 2.40005ZM3.83317 2.00005C3.83317 2.22096 3.68393 2.40005 3.49984 2.40005C3.31574 2.40005 3.1665 2.22096 3.1665 2.00005C3.1665 1.77913 3.31574 1.60005 3.49984 1.60005C3.68393 1.60005 3.83317 1.77913 3.83317 2.00005ZM4.83317 2.40005C5.01726 2.40005 5.1665 2.22096 5.1665 2.00005C5.1665 1.77913 5.01726 1.60005 4.83317 1.60005C4.64908 1.60005 4.49984 1.77913 4.49984 2.00005C4.49984 2.22096 4.64908 2.40005 4.83317 2.40005ZM5.83317 2.80005C5.83317 3.02096 5.68393 3.20005 5.49984 3.20005C5.31574 3.20005 5.1665 3.02096 5.1665 2.80005C5.1665 2.57914 5.31574 2.40005 5.49984 2.40005C5.68393 2.40005 5.83317 2.57914 5.83317 2.80005ZM4.1665 3.20005C4.3506 3.20005 4.49984 3.02096 4.49984 2.80005C4.49984 2.57914 4.3506 2.40005 4.1665 2.40005C3.98241 2.40005 3.83317 2.57914 3.83317 2.80005C3.83317 3.02096 3.98241 3.20005 4.1665 3.20005ZM3.1665 2.80005C3.1665 3.02096 3.01727 3.20005 2.83317 3.20005C2.64908 3.20005 2.49984 3.02096 2.49984 2.80005C2.49984 2.57914 2.64908 2.40005 2.83317 2.40005C3.01727 2.40005 3.1665 2.57914 3.1665 2.80005ZM1.49984 3.20005C1.68393 3.20005 1.83317 3.02096 1.83317 2.80005C1.83317 2.57914 1.68393 2.40005 1.49984 2.40005C1.31574 2.40005 1.1665 2.57914 1.1665 2.80005C1.1665 3.02096 1.31574 3.20005 1.49984 3.20005ZM2.49984 3.60005C2.49984 3.82096 2.3506 4.00005 2.1665 4.00005C1.98241 4.00005 1.83317 3.82096 1.83317 3.60005C1.83317 3.37913 1.98241 3.20005 2.1665 3.20005C2.3506 3.20005 2.49984 3.37913 2.49984 3.60005ZM3.49984 4.00005C3.68393 4.00005 3.83317 3.82096 3.83317 3.60005C3.83317 3.37913 3.68393 3.20005 3.49984 3.20005C3.31574 3.20005 3.1665 3.37913 3.1665 3.60005C3.1665 3.82096 3.31574 4.00005 3.49984 4.00005ZM5.1665 3.60005C5.1665 3.82096 5.01726 4.00005 4.83317 4.00005C4.64908 4.00005 4.49984 3.82096 4.49984 3.60005C4.49984 3.37913 4.64908 3.20005 4.83317 3.20005C5.01726 3.20005 5.1665 3.37913 5.1665 3.60005ZM5.49984 4.80005C5.68393 4.80005 5.83317 4.62096 5.83317 4.40005C5.83317 4.17913 5.68393 4.00005 5.49984 4.00005C5.31574 4.00005 5.1665 4.17913 5.1665 4.40005C5.1665 4.62096 5.31574 4.80005 5.49984 4.80005ZM4.49984 4.40005C4.49984 4.62096 4.3506 4.80005 4.1665 4.80005C3.98241 4.80005 3.83317 4.62096 3.83317 4.40005C3.83317 4.17913 3.98241 4.00005 4.1665 4.00005C4.3506 4.00005 4.49984 4.17913 4.49984 4.40005ZM2.83317 4.80005C3.01727 4.80005 3.1665 4.62096 3.1665 4.40005C3.1665 4.17913 3.01727 4.00005 2.83317 4.00005C2.64908 4.00005 2.49984 4.17913 2.49984 4.40005C2.49984 4.62096 2.64908 4.80005 2.83317 4.80005ZM1.83317 4.40005C1.83317 4.62096 1.68393 4.80005 1.49984 4.80005C1.31574 4.80005 1.1665 4.62096 1.1665 4.40005C1.1665 4.17913 1.31574 4.00005 1.49984 4.00005C1.68393 4.00005 1.83317 4.17913 1.83317 4.40005Z" fill="url(#paint0_linear_12694_49953)"/></g></g><defs><filter id="filter0_d_12694_49953" x="1.1665" y="0.800049" width="4.6665" height="5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12694_49953"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12694_49953" result="shape"/></filter><linearGradient id="paint0_linear_12694_49953" x1="1.1665" y1="0.800049" x2="1.1665" y2="4.80005" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#F0F0F0"/></linearGradient></defs></svg>
+      USA 
+      <ChevronDown size="14" class="ml-2"/>
+    </button>
+  <Dropdown triggeredBy="#states-button">
+    <DropdownItem class="flex items-center">
+      <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512"><g fill-rule="evenodd"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/><path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/></g><path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/><path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/></g></svg>
+      United States
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 512 512"><path fill="#ffce00" d="M0 341.3h512V512H0z"/><path d="M0 0h512v170.7H0z"/><path fill="#d00" d="M0 170.7h512v170.6H0z"/></svg>
+      Germany
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-it" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#fff" d="M0 0h512v512H0z"/><path fill="#009246" d="M0 0h170.7v512H0z"/><path fill="#ce2b37" d="M341.3 0H512v512H341.3z"/></g></svg>
+      Italy
+    </DropdownItem>
+    <DropdownItem class="flex items-center">
+      <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icon-css-cn" viewBox="0 0 512 512"><defs><path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z"/></defs><path fill="#de2910" d="M0 0h512v512H0z"/><use width="30" height="20" transform="matrix(76.8 0 0 76.8 128 128)" xlink:href="#a"/><use width="30" height="20" transform="rotate(-121 142.6 -47) scale(25.5827)" xlink:href="#a"/><use width="30" height="20" transform="rotate(-98.1 198 -82) scale(25.6)" xlink:href="#a"/><use width="30" height="20" transform="rotate(-74 272.4 -114) scale(25.6137)" xlink:href="#a"/><use width="30" height="20" transform="matrix(16 -19.968 19.968 16 256 230.4)" xlink:href="#a"/></svg>
+      China
+    </DropdownItem>
+  </Dropdown>
+  <Select items={states} placeholder="Choose the state" class="!rounded-l-none"/>
+</div>
+```
+
+<Htwo label="Sizes" />
+
+Get started with the small, default, and large sizes for the select component from the example below.
+
+```svelte example
+<script>
+  import { Select, Label } from 'flowbite-svelte'
+  let countries = [
+    {value:"us", name: "United States"},
+    {value:"ca", name: "Canada"},
+    {value:"fr", name: "France"},
+  ]
+</script>
+
+<Label for="select-sm" class="mb-2">Small select</Label>
+<Select id="select-sm" size="sm" items={countries} class="mb-6"/>
+<Label for="select-md" class="mb-2">Default select</Label>
+<Select id="select-md" size="md" items={countries} class="mb-6"/>
+<Label for="select-lg" class="mb-2">Large select</Label>
+<Select id="select-lg" size="lg" items={countries} class="mb-6"/>
+<p class="my-6">  </p>
+<Label for="select-sm" class="sr-only">Underline small select</Label>
+<Select id="select-sm" underline size="sm" items={countries} class="mb-6"/>
+<Label for="select-md" class="sr-only">Underline default select</Label>
+<Select id="select-md" underline size="md" items={countries} class="mb-6"/>
+<Label for="select-lg" class="sr-only">Underline large select</Label>
+<Select id="select-lg" underline size="lg" items={countries} class="mb-6"/>
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events" />
+
+<div class="flex flex-wrap gap-2">
+<Badge large={true}>on:change</Badge>
+<Badge large={true}>on:input</Badge>
+</div>

package/src/routes/forms/textarea.md

@@ -0,0 +1,162 @@
+---
+layout: formLayout
+title: Svelte Textarea - Flowbite
+breadcrumb_title: Textarea
+dir: Forms
+description: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Heading, Breadcrumb, BreadcrumbItem, Badge, A } from '$lib'
+  import { props as items } from '../props/Textarea.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="forms/Textarea.svelte">Textarea</GitHubSource>
+</ExampleDiv>
+
+The textarea component is a multi-line text field input that can be used to receive longer chuncks of text from the user in the form of a comment box, description field, and more.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Textarea } from 'flowbite-svelte' 
+</script>
+```
+
+<Htwo label="Textarea example" />
+
+Get started with the default example of a textarea component below.
+
+```svelte example
+<script>
+  import { Textarea, Label } from 'flowbite-svelte' 
+</script>
+
+<Label for="textarea-id" class="mb-2">Your message</Label>
+<Textarea id="textarea-id" placeholder="Your message" rows="4" name="message"/>
+```
+
+<Htwo label="WYSIWYG Editor" />
+
+If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.
+
+```svelte example
+<script>
+  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte' 
+</script>
+
+<form>
+  <label for="editor" class="sr-only">Publish post</label>
+  <Textarea id="editor" rows="8" class="mb-4" placeholder="Write a comment">
+    <Toolbar slot="header" embedded>
+      <ToolbarGroup>
+        <ToolbarButton name="Attach file"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></ToolbarButton>
+        <ToolbarButton name="Embed map"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></ToolbarButton>
+        <ToolbarButton name="Upload image"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarGroup>
+        <ToolbarButton name="Format code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg></ToolbarButton>
+        <ToolbarButton name="Add emoji"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg></ToolbarButton>
+      </ToolbarGroup>
+      <ToolbarButton name="send" slot="end"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg></ToolbarButton>
+    </Toolbar>
+  </Textarea>
+  <Button>Publish post</Button>
+</form>
+```
+<Htwo label="Comment box" />
+
+Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
+
+```svelte example class="space-y-4"
+<script>
+  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte' 
+</script>
+
+<form>
+  <Textarea class="mb-4" placeholder="Write a comment">
+    <div slot="footer" class="flex items-center justify-between">
+    <Button type="submit">Post comment</Button>
+    <Toolbar embedded>
+        <ToolbarButton name="Attach file"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></ToolbarButton>
+        <ToolbarButton name="Set location"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></ToolbarButton>
+        <ToolbarButton name="Upload image"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></ToolbarButton>
+    </Toolbar>
+    </div>
+  </Textarea>
+</form>
+<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="/" class="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
+```
+
+<Htwo label="Chatroom input" />
+
+If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.
+
+```svelte example class="space-y-4"
+<script>
+  import { Textarea, Alert, CloseButton } from 'flowbite-svelte' 
+</script>
+
+<form>
+  <label for="chat" class="sr-only">Your message</label>
+  <Alert color="dark" class="px-3 py-2">
+    <CloseButton color="dark" class="text-gray-500 dark:text-gray-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>
+        <span class="sr-only">Upload image</span>
+    </CloseButton>
+    <CloseButton color="dark" class="text-gray-500 dark:text-gray-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg>
+        <span class="sr-only">Add emoji</span>
+    </CloseButton>
+    <Textarea id="chat" class="mx-4" rows="1" placeholder="Your message..."/>
+    <CloseButton type="submit" color="blue" class="rounded-full text-blue-600 dark:text-blue-500">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
+        <span class="sr-only">Send message</span>
+    </CloseButton>
+  </Alert>
+</form>
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
+
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events" />
+
+<div class="flex flex-wrap gap-2">
+<Badge large={true}>on:blur</Badge>
+<Badge large={true}>on:change</Badge>
+<Badge large={true}>on:click</Badge>
+<Badge large={true}>on:focus</Badge>
+<Badge large={true}>on:keydown</Badge>
+<Badge large={true}>on:keypress</Badge>
+<Badge large={true}>on:keyup</Badge>
+<Badge large={true}>on:mouseenter</Badge>
+<Badge large={true}>on:mouseleave</Badge>
+<Badge large={true}>on:mouseover</Badge>
+<Badge large={true}>on:paste</Badge>
+</div>

package/src/routes/forms/toggle.md

@@ -0,0 +1,103 @@
+---
+layout: formLayout
+title: Svelte Toggle (Switch) - Flowbite
+breadcrumb_title: Toggle
+dir: Forms
+description: Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { onMount } from 'svelte';
+  import { Toggle, Breadcrumb, BreadcrumbItem, Badge, Heading, A } from '$lib'
+  import { props as items } from '../props/Toggle.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="forms/Toggle.svelte">Toggle</GitHubSource>
+</ExampleDiv>
+
+The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Toggle } from 'flowbite-svelte'
+</script>
+```
+
+<Htwo label="Toggle examples" />
+
+Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
+
+```svelte example class="flex flex-col gap-2" hideScript
+<script>
+  import { Toggle } from 'flowbite-svelte'
+</script>
+
+<Toggle>Toggle me</Toggle>
+<Toggle checked={true}>Checked toggle</Toggle>
+<Toggle disabled>Disabled toggle</Toggle>
+<Toggle checked disabled>Disabled checked</Toggle>
+```
+
+<Htwo label="Colors" />
+
+```svelte example class="flex justify-between" hideScript
+<script>
+  import { Toggle } from 'flowbite-svelte'
+</script>
+
+<Toggle color="red" checked>Red</Toggle>
+<Toggle color="green" checked>Green</Toggle>
+<Toggle color="purple" checked>Purple</Toggle>
+<Toggle color="yellow" checked>Yellow</Toggle>
+<Toggle color="teal" checked>Teal</Toggle>
+<Toggle color="orange" checked>Orange</Toggle>
+```
+
+<Htwo label="Sizes" />
+
+```svelte example class="flex flex-col gap-2" hideScript
+<script>
+  import { Toggle } from 'flowbite-svelte'
+</script>
+
+<Toggle size="small">Small toggle</Toggle>
+<Toggle size="default" checked>Default toggle</Toggle>
+<Toggle size="large" checked>Large toggle</Toggle>
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
+
+<h3 class='text-xl w-full dark:text-white py-4'>Toggle</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events" />
+
+<div class="flex flex-wrap gap-2">
+<Badge large={true}>on:change</Badge>
+<Badge large={true}>on:click</Badge>
+</div>

package/src/routes/layouts/component/+page.svelte

@@ -0,0 +1,9 @@
+<script>
+  import 'prism-themes/themes/prism-holi-theme.css';
+</script>
+
+<div class="max-w-3xl 2xl:max-w-4xl mx-auto mt-8">
+  <div class="container flex flex-wrap mx-auto">
+    <slot />
+  </div>
+</div>

package/src/routes/layouts/formLayout/+page.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Htwo from '../../utils/Htwo.svelte';
+  import 'prism-themes/themes/prism-holi-theme.css';
+</script>
+
+<div class="max-w-3xl 2xl:max-w-4xl mx-auto mt-8">
+  <div class="container flex flex-wrap mx-auto">
+    <slot />
+    <Htwo label="Related components" />
+    <div class="related-components">
+      <p>
+        <a href="/forms/checkbox" class="link">Checkbox</a>
+      </p>
+      <p>
+        <a href="/forms/file-input" class="link">File input</a>
+      </p>
+      <p>
+        <a href="/forms/floating-label" class="link">Floating label</a>
+      </p>
+      <p>
+        <a href="/forms/input-field" class="link">Input field</a>
+      </p>
+      <p>
+        <a href="/forms/radio" class="link">Radio</a>
+      </p>
+      <p>
+        <a href="/forms/range" class="link">Range</a>
+      </p>
+      <p>
+        <a href="/forms/search-input" class="link">Search input</a>
+      </p>
+      <p>
+        <a href="/forms/select" class="link">Select</a>
+      </p>
+      <p>
+        <a href="/forms/textarea" class="link">Textarea</a>
+      </p>
+      <p>
+        <a href="/forms/toggle" class="link">Toggle</a>
+      </p>
+    </div>
+    <Htwo label="References" />
+    <div class="references">
+      <p>
+        <a href="https://flowbite.com/docs/components/forms/" target="_blank" rel="noreferrer" class="link"
+          >Flowbite Forms</a>
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .link {
+    color: #f83c00;
+  }
+  .link:hover {
+    color: #fc7146;
+    text-decoration: underline;
+  }
+</style>

package/src/routes/layouts/pageLayout/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+  import Htwo from '../../utils/Htwo.svelte';
+  import 'prism-themes/themes/prism-holi-theme.css';
+</script>
+
+<div class="max-w-3xl 2xl:max-w-4xl mx-auto mt-8">
+  <div class="container flex flex-wrap mx-auto">
+    <slot />
+
+    <Htwo label="Related topics" />
+    <div class="related-components">
+      <p>
+        <a href="/pages/getting-started" class="link">Getting started</a>
+      </p>
+      <p>
+        <a href="/pages/license" class="link">License</a>
+      </p>
+      <p>
+        <a href="/pages/types" class="link">Type list</a>
+      </p>
+      <p>
+        <a href="/pages/about" class="link">About</a>
+      </p>
+      <p>
+        <a href="/pages/how-to-contribute" class="link">How to contribute</a>
+      </p>
+    </div>
+    <Htwo label="References" />
+    <div class="references">
+      <p>
+        <a href="https://svelte.dev/docs" class="link">Svelte</a>
+      </p>
+
+      <p>
+        <a href="https://kit.svelte.dev/docs" class="link">SvelteKit</a>
+      </p>
+
+      <p>
+        <a href="https://tailwindcss.com/docs/installation" class="link">TailwindCSS</a>
+      </p>
+
+      <p>
+        <a href="https://flowbite.com/docs/getting-started/introduction/" class="link">Flowbite</a>
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .link {
+    color: #f83c00;
+  }
+  .link:hover {
+    color: #fc7146;
+    text-decoration: underline;
+  }
+</style>

package/src/routes/layouts/testLayout/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+  import Htwo from '../../utils/Htwo.svelte';
+  import 'prism-themes/themes/prism-holi-theme.css';
+</script>
+
+<slot />