feat: export input HTMLInputElement in form components

[mkmoisen]

📑 Description

Adds an exported HTMLInputElement for all the form components.

The purpose is to allow parent components to get a reference to the HTML input/select/etc, for example to programmatically focus.

<script>
  import { Label, Input, Button } from 'flowbite-svelte';
  let element;
</script>

<div class="mb-6">
  <Label for="focus-input" class="block mb-2">Focus input</Label>
  <Input bind:element id="focus-input" size="lg" placeholder="Focus input" />
</div>

<div>
  <Button on:click={() => {element.focus()}}>
    Focus
  </Button>
</div>

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 3, 2024 4:26pm
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 3, 2024 4:26pm

[mkmoisen]

Hi @shinokada , any chance you can take a look at this when you have a moment?

This exposes the html elements for all the form elements, such that parent's are able to grab the element and focus for example.

[shinokada]

Thank you for the PR.

1. There are conflicts. Is it possible to solve them?
2. Can you add examples in the docs?