Floating label Components
Examples
<script>
import { FloatingLabelInput } from 'flowbite-svelte'
</script>
<form>
<FloatingLabelInput id="email" name="email" type="email" required label="Email"/>
<FloatingLabelInput id="password" name="password" type="password" required label="Password" />
<FloatingLabelInput id="confirmpassword" name="confirm_password" type="password" required label="Confirm password" />
<FloatingLabelInput id="first_name" name="first_name" type="text" required label="First name" />
</form>
Props
The component has the following props, type, and default values. See types page for type information.
Name | Type | Default |
---|---|---|
id | string | generateId() |
type | InputType | |
value | string | '' |
name | string | '' |
label | string | '' |
required | boolean | false |
divClass | string | 'relative z-0 mb-6 w-full group' |
inputClass | string | 'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer' |
labelClass | string | 'absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6' |