flowbite-svelte 0.44.7 → 0.44.9

package/src/routes/docs/forms/checkbox.md

@@ -0,0 +1,329 @@
+---
+layout: componentLayout
+title: Svelte Checkbox - Flowbite
+breadcrumb_title: Svelte Checkbox
+component_title: Checkbox
+dir: Forms
+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
+thumnailSize: w-72
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, A } from '$lib'
+
+  const components = 'Checkbox, Label, Helper'
+</script>
+
+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.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+```
+
+## Checkbox examples
+
+Use this default example of a checbkox element in a checked and unchecked state.
+
+```svelte example class="flex flex-col gap-4" hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<Checkbox>Default checkbox</Checkbox>
+<Checkbox checked>Checked state</Checkbox>
+```
+
+## Disabled state
+
+This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.
+
+```svelte example class="flex flex-col gap-4" hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<Checkbox disabled>Disabled checkbox</Checkbox>
+<Checkbox disabled checked>Disabled checked</Checkbox>
+```
+
+## Alternative syntax
+
+If you need separate control over the label and the checkbox you can use the verbose syntax, but then you need to take care about aligning manually.
+
+```svelte example class="flex flex-col gap-4"
+<script>
+  import { Checkbox, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, Label, TableBodyRow } from 'flowbite-svelte';
+</script>
+
+<Table>
+  <TableHead>
+    <TableHeadCell>Left column</TableHeadCell>
+    <TableHeadCell>Right column</TableHeadCell>
+  </TableHead>
+  <TableBody class="divide-y dark:divide-gray-700">
+    <TableBodyRow class="divide-x dark:divide-gray-700">
+      <TableBodyCell><Label for="checkbox1">Default checkbox</Label></TableBodyCell>
+      <TableBodyCell><Label for="checkbox2">Disabled checkbox</Label></TableBodyCell>
+    </TableBodyRow>
+    <TableBodyRow class="divide-x dark:divide-gray-700">
+      <TableBodyCell><Checkbox id="checkbox1" checked /></TableBodyCell>
+      <TableBodyCell><Checkbox id="checkbox2" disabled /></TableBodyCell>
+    </TableBodyRow>
+  </TableBody>
+</Table>
+
+<Label color="red" class="mt-4 flex items-center font-bold italic">
+  Label on the other side <Checkbox class="ml-2" />
+</Label>
+```
+
+## Checkbox with a link
+
+Use this example if you want to add an anchor link inside the label of the checkbox component.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<Checkbox>
+  I agree with the
+  <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1">terms and conditions</a>
+  .
+</Checkbox>
+```
+
+## Helper text
+
+Get started with this example if you want to add a secondary helper text for the checkbox component.
+
+```svelte example
+<script>
+  import { Checkbox, Helper } from 'flowbite-svelte';
+</script>
+
+<Checkbox aria-describedby="helper-checkbox-text">Free shipping via Flowbite</Checkbox>
+<Helper id="helper-checkbox-text" class="pl-6">For orders shipped from $25 in books or $29 in other categories</Helper>
+```
+
+## Bordered
+
+Use this example of a checkbox inside a card element to enable a larger area of clicking activation.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<div class="rounded border border-gray-200 dark:border-gray-700">
+  <Checkbox class="w-full p-4">Default radio</Checkbox>
+</div>
+<div class="rounded border border-gray-200 dark:border-gray-700">
+  <Checkbox checked class="w-full p-4">Checked state</Checkbox>
+</div>
+```
+
+## Checkbox list group
+
+Use this example to show a list of checkbox items grouped inside a card.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</p>
+<ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600">
+  <li><Checkbox class="p-3">svelte</Checkbox></li>
+  <li><Checkbox class="p-3">Vue JS</Checkbox></li>
+  <li><Checkbox class="p-3">React</Checkbox></li>
+  <li><Checkbox class="p-3">Angular</Checkbox></li>
+</ul>
+```
+
+## Horizontal list group
+
+Use this example to show a list of checkbox items inside a card horizontally.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
+<ul class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600">
+  <li class="w-full"><Checkbox class="p-3">Svelte</Checkbox></li>
+  <li class="w-full"><Checkbox class="p-3">Vue JS</Checkbox></li>
+  <li class="w-full"><Checkbox class="p-3">React</Checkbox></li>
+  <li class="w-full"><Checkbox class="p-3">Angular</Checkbox></li>
+</ul>
+```
+
+## Checkbox dropdown
+
+Use this example to show a list of checkbox items inside a dropdown menu.
+
+```svelte example class="flex justify-center items-start h-96"
+<script>
+  import { Dropdown, DropdownItem, Checkbox, Button, Search } from 'flowbite-svelte';
+  import { ChevronDownSolid, UserRemoveSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Button>Project users<ChevronDownSolid class="w-3 h-3 ml-2 text-white dark:text-white" /></Button>
+<Dropdown class="overflow-y-auto px-3 pb-3 text-sm h-44">
+  <div slot="header" class="p-3">
+    <Search size="md" />
+  </div>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox>Robert Gouth</Checkbox>
+  </li>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox>Jese Leos</Checkbox>
+  </li>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox checked>Bonnie Green</Checkbox>
+  </li>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox>Jese Leos</Checkbox>
+  </li>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox>Robert Gouth</Checkbox>
+  </li>
+  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
+    <Checkbox>Bonnie Green</Checkbox>
+  </li>
+  <a slot="footer" href="/" class="flex items-center p-3 -mb-1 text-sm font-medium text-red-600 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline">
+    <UserRemoveSolid class="w-5 h-5 mr-1" />Delete user
+  </a>
+</Dropdown>
+```
+
+## Inline layout
+
+You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<div class="flex gap-3">
+  <Checkbox>Inline 1</Checkbox>
+  <Checkbox>Inline 2</Checkbox>
+  <Checkbox checked>Inline checked</Checkbox>
+  <Checkbox disabled>Inline disabled</Checkbox>
+</div>
+```
+
+You can use the property `inline` as the alternative.
+
+```svelte example hideScript
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+</script>
+
+<Checkbox inline class="mr-2">Inline 1</Checkbox>
+<Checkbox inline class="mr-2">Inline 2</Checkbox>
+<Checkbox inline class="mr-2" checked>Inline checked</Checkbox>
+<Checkbox inline class="mr-2" disabled>Inline disabled</Checkbox>
+```
+
+## Colors
+
+```svelte example hideScript
+<script>
+  import { Label, Checkbox } from 'flowbite-svelte';
+</script>
+
+<div class="flex gap-4">
+  <Checkbox checked color="red">Red</Checkbox>
+  <Checkbox checked color="green">Green</Checkbox>
+  <Checkbox checked color="purple">Purple</Checkbox>
+  <Checkbox checked color="teal">Teal</Checkbox>
+  <Checkbox checked color="yellow">Yellow</Checkbox>
+  <Checkbox checked color="orange">Orange</Checkbox>
+  <Label class="flex items-center">
+    <Checkbox checked inline class="text-sky-400 focus:ring-pink-500" />
+    Your custom color
+  </Label>
+</div>
+```
+
+## 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.
+
+```svelte example
+<script>
+  import { Checkbox } from 'flowbite-svelte';
+  import React from '../../utils/icons/React.svelte';
+  import Vue from '../../utils/icons/Vue.svelte';
+  import Angular from '../../utils/icons/Angular.svelte';
+</script>
+
+<p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
+<div class="grid gap-6 w-full md:grid-cols-3">
+  <Checkbox custom>
+    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+      <React />
+      <div class="w-full text-lg font-semibold">React Js</div>
+      <div class="w-full text-sm">A JavaScript library for building user interfaces.</div>
+    </div>
+  </Checkbox>
+  <Checkbox custom>
+    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+      <Vue />
+      <div class="w-full text-lg font-semibold">Vue Js</div>
+      <div class="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</div>
+    </div>
+  </Checkbox>
+  <Checkbox custom>
+    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+      <Angular />
+      <div class="w-full text-lg font-semibold">Angular</div>
+      <div class="w-full text-sm">A TypeScript-based web application framework.</div>
+    </div>
+  </Checkbox>
+</div>
+```
+
+## Group variable
+
+```svelte example
+<script>
+  import { Button, Checkbox } from 'flowbite-svelte';
+
+  let group = [2, 3];
+</script>
+
+<div class="flex gap-2">
+  <Checkbox bind:group value={1}>One</Checkbox>
+  <Checkbox bind:group value={2}>Two</Checkbox>
+  <Checkbox bind:group value={3}>Three</Checkbox>
+</div>
+<div class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44">Group: {group}</div>
+<Button on:click={() => (group.length = 0)}>Clear</Button>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Checkbox styling
+
+- Use the `class` prop to overwrite the `label` and `input` tag class.
+
+### Helper styling
+
+- Use the `class` prop to overwrite the `p` tag class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Checkbox](https://flowbite.com/docs/forms/checkbox/)

package/src/routes/docs/forms/file-input.md

@@ -0,0 +1,171 @@
+---
+layout: componentLayout
+title: Svelte File Input - Flowbite
+breadcrumb_title: Svelte File Input
+component_title: File input
+dir: Forms
+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
+thumnailSize: w-48
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, A } from '$lib'
+  const components = 'Fileupload, Dropzone'
+</script>
+
+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, variants and support for dark mode.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Fileupload } from 'flowbite-svelte';
+</script>
+```
+
+## File upload example
+
+```svelte example
+<script>
+  import { Fileupload, Label } from 'flowbite-svelte';
+  let value;
+</script>
+
+<Label class="space-y-2 mb-2">
+  <span>Upload file</span>
+  <Fileupload bind:value />
+</Label>
+<Label>File: {value}</Label>
+```
+
+## Helper text
+
+```svelte example
+<script>
+  import { Fileupload, Label, Helper } from 'flowbite-svelte';
+</script>
+
+<Label for="with_helper" class="pb-2">Upload file</Label>
+<Fileupload id="with_helper" class="mb-2" />
+<Helper>SVG, PNG, JPG or GIF (MAX. 800x400px).</Helper>
+```
+
+## Multiple files
+
+When the user selected multiple files, the `value` represents the first file in the list of files they selected. The other files can be identified using the `files` property.
+
+```svelte example
+<script>
+  import { Fileupload, Label, Listgroup, ListgroupItem } from 'flowbite-svelte';
+  let files; // FileList type
+</script>
+
+<Label class="pb-2" for="multiple_files">Upload multiple files</Label>
+<Fileupload id="multiple_files" multiple bind:files />
+<Listgroup items={files} let:item class="mt-2">
+  {#if item}
+    {item.name}
+  {:else}
+    <ListgroupItem>No files</ListgroupItem>
+  {/if}
+</Listgroup>
+```
+
+## Sizes
+
+```svelte example
+<script>
+  import { Fileupload, Label } from 'flowbite-svelte';
+</script>
+
+<Label class="pb-2" for="small_size">Small file input</Label>
+<Fileupload id="small_size" size="sm" />
+<Label class="py-2" for="default_size">Default size</Label>
+<Fileupload id="default_size" />
+<Label class="py-2" for="larg_size">Large file input</Label>
+<Fileupload id="larg_size" size="lg" />
+```
+
+## Dropzone
+
+```svelte example
+<script>
+  import { Dropzone } from 'flowbite-svelte';
+
+  let value = [];
+  const dropHandle = (event) => {
+    value = [];
+    event.preventDefault();
+    if (event.dataTransfer.items) {
+      [...event.dataTransfer.items].forEach((item, i) => {
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          value.push(file.name);
+          value = value;
+        }
+      });
+    } else {
+      [...event.dataTransfer.files].forEach((file, i) => {
+        value = file.name;
+      });
+    }
+  };
+
+  const handleChange = (event) => {
+    const files = event.target.files;
+    if (files.length > 0) {
+      value.push(files[0].name);
+      value = value;
+    }
+  };
+
+  const showFiles = (files) => {
+    if (files.length === 1) return files[0];
+    let concat = '';
+    files.map((file) => {
+      concat += file;
+      concat += ',';
+      concat += ' ';
+    });
+
+    if (concat.length > 40) concat = concat.slice(0, 40);
+    concat += '...';
+    return concat;
+  };
+</script>
+
+<Dropzone
+  id="dropzone"
+  on:drop={dropHandle}
+  on:dragover={(event) => {
+    event.preventDefault();
+  }}
+  on:change={handleChange}>
+  <svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
+  {#if value.length === 0}
+    <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+  {:else}
+    <p>{showFiles(value)}</p>
+  {/if}
+</Dropzone>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Fileupload styling
+
+- Use the `class` prop to overwrite `inputClass`.
+
+### Dropzone styling
+
+- Use the `class` prop to overwrite `defaultClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite File Input](https://flowbite.com/docs/forms/file-input/)

package/src/routes/docs/forms/floating-label.md

@@ -0,0 +1,176 @@
+---
+layout: componentLayout
+title: Svelte Floating Label - Flowbite
+breadcrumb_title: Svelte Floating Label
+component_title: Floating Label
+dir: Forms
+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
+thumnailSize: w-40
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, A } from '$lib'
+
+  const components = 'FloatingLabelInput, Helper'
+</script>
+
+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.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+</script>
+```
+
+## Floating label examples
+
+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.
+
+```svelte example hideScript
+<script>
+  import { FloatingLabelInput } from 'flowbite-svelte';
+</script>
+
+<div id="exampleWrapper" class="grid gap-6 items-end w-full md:grid-cols-3">
+  <FloatingLabelInput style="filled" id="floating_filled" name="floating_filled" type="text" label="Floating filled" />
+  <FloatingLabelInput style="outlined" id="floating_outlined" name="floating_outlined" type="text" label="Floating outlined" />
+  <FloatingLabelInput id="floating_standard" name="floating_standard" type="text" label="Floating standard" />
+</div>
+```
+
+## Disabled state
+
+Apply the disabled attribute to the input fields to disallow the user from changing the content.
+
+```svelte example hideScript
+<script>
+  import { FloatingLabelInput } from 'flowbite-svelte';
+</script>
+
+<div id="exampleWrapper" class="grid gap-6 items-end w-full md:grid-cols-3">
+  <FloatingLabelInput style="filled" id="disabled_filled" name="disabled_filled" type="text" label="Disabled filled" disabled />
+  <FloatingLabelInput style="outlined" id="disabled_outlined" name="disabled_outlined" type="text" label="Disabled outlined" disabled />
+  <FloatingLabelInput id="disabled_standard" name="disabled_standard" type="text" label="Disabled standard" disabled />
+</div>
+```
+
+## 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.
+
+```svelte example
+<script>
+  import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+</script>
+
+<!-- Success messages -->
+<div class="grid gap-6 items-end mb-6 md:grid-cols-3">
+  <div>
+    <FloatingLabelInput color="green" style="filled" id="filled_success" aria-describedby="filled_success_help" name="filled_success" type="text" label="Filled success" />
+    <Helper color="green">
+      <span class="font-medium">Well done!</span>
+      Some success message.
+    </Helper>
+  </div>
+  <div>
+    <FloatingLabelInput color="green" style="outlined" id="outlined_success" aria-describedby="outlined_success_help" name="outlined_success" type="text" label="Outlined success" />
+    <Helper color="green">
+      <span class="font-medium">Well done!</span>
+      Some success message.
+    </Helper>
+  </div>
+  <div>
+    <FloatingLabelInput color="green" style="standard" id="standard_success" aria-describedby="standard_success_help" name="standard_success" type="text" label="Standard success" />
+    <Helper color="green">
+      <span class="font-medium">Well done!</span>
+      Some success message.
+    </Helper>
+  </div>
+</div>
+<!-- Error messages -->
+<div class="grid gap-6 items-end mb-6 md:grid-cols-3">
+  <div>
+    <FloatingLabelInput color="red" style="filled" id="filled_error" aria-describedby="filled_error_help" name="filled_error" type="text" label="Filled error" />
+    <Helper color="red">
+      <span class="font-medium">Oh, snapp!</span>
+      Some error message.
+    </Helper>
+  </div>
+  <div>
+    <FloatingLabelInput color="red" style="outlined" id="outlined_error" aria-describedby="outlined_error_help" name="outlined_success" type="text" label="Outlined error" />
+    <Helper color="red">
+      <span class="font-medium">Oh, snapp!</span>
+      Some error message.
+    </Helper>
+  </div>
+  <div>
+    <FloatingLabelInput color="red" style="standard" id="standard_error" aria-describedby="standard_error_help" name="standard_success" type="text" label="Standard error" />
+    <Helper color="red">
+      <span class="font-medium">Oh, snapp!</span>
+      Some error message.
+    </Helper>
+  </div>
+</div>
+```
+
+## Sizes
+
+Use the small and default sizes of the floating label input fields from the following example.
+
+```svelte example hideScript
+<script>
+  import { FloatingLabelInput } from 'flowbite-svelte';
+</script>
+
+<div class="grid gap-6 items-end mb-6 md:grid-cols-3">
+  <FloatingLabelInput size="small" style="filled" id="small_filled" name="small_filled" type="text" label="Small filled" />
+  <FloatingLabelInput size="small" style="outlined" id="small_outlined" name="small_outlined" type="text" label="Small outlined" />
+  <FloatingLabelInput size="small" id="small_standard" name="small_standard" type="text" label="Small standard" />
+</div>
+<div class="grid gap-6 items-end md:grid-cols-3">
+  <FloatingLabelInput style="filled" id="default_filled" name="default_filled" type="text" label="Default filled" />
+  <FloatingLabelInput style="outlined" id="default_outlined" name="default_outlined" type="text" label="Default outlined" />
+  <FloatingLabelInput id="default_standard" name="default_standard" type="text" label="Default standard" />
+</div>
+```
+
+## Helper text
+
+Add a helper text in addition to the label if you want to show more information below the input field.
+
+```svelte example
+<script>
+  import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+</script>
+
+<FloatingLabelInput style="filled" id="floating_helper" aria-describedby="floating_helper_text" name="floating_helper" type="text" label="Floating helper" />
+<Helper class="pt-2">
+  Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline"> Community Guidelines </a>
+  .
+</Helper>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### FloatingLabelInput styling
+
+- Use the `classDiv` prop to overwrite the div class.
+- Use the `classInput` prop to overwrite the input class.
+- Use the `classLabel` prop to overwrite the label class.
+
+### Helper styling
+
+- Use the `class` prop to overwrite the `p` tag class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Floating Label](https://flowbite.com/docs/forms/floating-label/)