https://github.com/unlight/tailwind-float-label
Tailwind plugin to add floating label, control with float label components
https://github.com/unlight/tailwind-float-label
float-label float-label-pattern floating-label tailwind-component tailwind-components tailwind-plugin tailwind-plugins tailwindcss-plugin
Last synced: 3 months ago
JSON representation
Tailwind plugin to add floating label, control with float label components
- Host: GitHub
- URL: https://github.com/unlight/tailwind-float-label
- Owner: unlight
- License: mit
- Created: 2020-10-10T16:01:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-08T17:33:51.000Z (about 3 years ago)
- Last Synced: 2025-01-28T14:03:57.579Z (4 months ago)
- Topics: float-label, float-label-pattern, floating-label, tailwind-component, tailwind-components, tailwind-plugin, tailwind-plugins, tailwindcss-plugin
- Language: HTML
- Homepage: https://unlight.github.io/tailwind-float-label
- Size: 1.03 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwind-float-label
Tailwind plugin to add floating label, control with float label components
Demo - https://unlight.github.io/tailwind-float-label
## Setup
```sh
npm install --save-dev tailwind-float-label
```
Add plugin to `plugins` section of `tailwind.config.js`
```js
plugins: [require('tailwind-float-label')(options)],
```
## Options
```ts
type Options = {
/**
* Custom styles for container.
*/
container?: DeepPartial<{ [k: string]: string } | string>;
/**
* Custom styles for input control.
*/
control?: DeepPartial<{ [k: string]: string } | string>;
/**
* Custom styles for label.
*/
label?: DeepPartial<{ [k: string]: string } | string>;
};
```
## Usage
Plugins adds these components supposed used together:
- `.float-label-container` Container which holds input control and label
- `.float-label-control` Form control
- `.float-label-self` Label
- `.float-label-sticky` Label which is always visible
- But `.float-label-auto` Automatically make `label` floating and `input` inside this container
```html
Example
Name
Auto
```
#### Notes:
`.float-label-control` and `.float-label-self` must be direct children of `.float-label-container`
## Similar Projects
- https://github.com/notiz-dev/floating-form-field-tailwindcss
## Resources
- https://tailwindow.github.io/component-tailwindcss/components/form/input-text/index.html
- https://github.com/you-dont-need/You-Dont-Need-JavaScript#Floating
- https://csslayout.io/floating-label/
- https://tailwindcomponents.com/component/login-form-with-float-label-input