FloatLabel

The label rides the border.

<sui-float-label>Text inputsStable

About

Text field whose label sits in the placeholder position and floats up onto the border on focus or when there is a value. For marketing and sign-in forms; in-app forms use sui-input-text with its static label. Form-associated: it posts name=value and binds to React, Vue (v-model) and Angular forms.

Usage

<sui-float-label label="Email" name="email" type="email" autocomplete="username"></sui-float-label> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); const el = document.querySelector("sui-float-label"); el.addEventListener("suiChange", (e) => console.log(e.detail)); </script>

import { SuiFloatLabel } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiFloatLabel label="Email" name="email" type="email" autocomplete="username" onSuiChange={(e) => console.log(e.detail)} />; }

import { Component } from "@angular/core"; import { SuiFloatLabel } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiFloatLabel], template: `<sui-float-label label="Email" name="email" type="email" autocomplete="username" (suiChange)="onChange($event)"></sui-float-label>`, }) export class Example { onChange(e: CustomEvent) { console.log(e.detail); } }

Basic

The label starts where a placeholder would sit and floats onto the border on focus or once there is a value. It is a real label bound to the input, so clicking it focuses the field.

States

The floating label is the field label, so help and error render on the shared lines below. The error line carries role="alert" and paints the label too.

In a form

Each field posts one entry under its host name. required blocks the submit while a field is empty, and the label names the browser message.

<form id="fl-form" style="display:grid;gap:14px;max-width:340px"> <sui-float-label label="Email" name="email" type="email" required autocomplete="username"></sui-float-label> <sui-float-label label="Password" name="password" type="password" required autocomplete="current-password"></sui-float-label> <sui-button type="submit" variant="brand" label="Sign in"></sui-button> <output id="fl-out" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Submit to see what posts.</output> </form>

// setup(root): properties and events setup(root) { const form = root.querySelector('#fl-form'); const out = root.querySelector('#fl-out'); form.addEventListener('submit', (e) => { e.preventDefault(); out.textContent = [...new FormData(form)].map(([k, v]) => `${k}=${k === 'password' ? '(hidden)' : v || '(empty)'}`).join(' '); }); }

Events

suiInput fires on every keystroke, suiChange on commit at blur or Enter. Both carry the current value as the detail. suiFocus fires as the label floats up and suiBlur as the input lets go.

Idle.

// setup(root): properties and events setup(root) { const log = root.querySelector('#fl-log'); const el = root.querySelector('#fl-events'); el.addEventListener('suiFocus', () => { log.textContent = 'suiFocus'; }); el.addEventListener('suiBlur', () => { log.textContent = 'suiBlur'; }); el.addEventListener('suiInput', (e) => { log.textContent = `suiInput ${e.detail || '(empty)'}`; }); el.addEventListener('suiChange', (e) => { log.textContent = `suiChange ${e.detail || '(empty)'}`; }); }

Keyboard

Key	Action
`Tab`	Moves to the field and on to the next control; the host itself takes no tab stop.
`Printable characters`	Type into the native input; suiInput fires on every keystroke.
`Enter`	Submits the surrounding form, as a native input does.

API

`<sui-float-label>`

Properties

Property	Attribute	Type	Default	Description
`autocomplete`	`autocomplete`	`string`string \| undefined		Native autocomplete hint. `inputmode` and `enterkeyhint` set on the host reach the input the same way, and `spellcheck` and `autocapitalize` on the host apply to it as they do to any descendant.
`disabled`	`disabled`	`boolean`	`false`	Disables the field.
`error`	`error`	`string`string \| undefined		Error message on the shared line under the box; paints the field and label in the danger tone and sets aria-invalid.
`help`	`help`	`string`string \| undefined		Help text on the shared line under the box. Replaced by `error` when set.
`invalid`	`invalid`	`boolean`	`false`	Danger border and label.
`label`*	`label`	`string`		The floating label. It takes the placeholder's position, so there is no placeholder prop, and it names the field; only without one does the host's `aria-label` or `aria-labelledby`, the rule every text field shares.
`maxLength`	`maxlength`	`number`number \| undefined		Maximum number of characters, as the native `maxlength`.
`minLength`	`minlength`	`number`number \| undefined		Native `minlength`: a value shorter than this, once the user has typed, fails as `tooShort`.
`name`	`name`	`string`string \| undefined		Form control name. Reflected: form entry construction reads the content attribute, while all three framework bindings set properties, so an unreflected name posts nothing at all.
`pattern`	`pattern`	`string`string \| undefined		Native `pattern`: a regular expression the whole value must match. The browser checks it and the field reports `patternMismatch` on its validity, the way `required` reports `valueMissing`.
`readOnly`	`readonly`	`boolean`	`false`	Display only: the text can be selected and copied but not edited; the field still posts its value.
`required`	`required`	`boolean`	`false`	Marks the field required (valueMissing validity when empty).
`type`	`type`	`SuiInputType`"email" \| "password" \| "search" \| "tel" \| "text" \| "url"	`'text'`	Native input type. One union across the four elements that wrap a native text input.
`value`	`value`	`string`	`''`	Current value. Mutable; listen to suiInput / suiChange to observe edits.

Events

Event	Detail	React	Vue	Description
`suiBlur`	`void`	`onSuiBlur`	`@sui-blur`	Fires when the input loses focus; no detail. Does not bubble.
`suiChange`	`string`	`onSuiChange`	`@sui-change`	Fires on commit (blur or Enter, native change); detail is the final value.
`suiFocus`	`void`	`onSuiFocus`	`@sui-focus`	Fires when the input takes focus, as the label floats up; no detail. The same pair is on every text field. Does not bubble.
`suiInput`	`string`	`onSuiInput`	`@sui-input`	Fires on every keystroke; detail is the current value.

Methods

Method	Signature	Description
`select()`	`select() => Promise<void>`	Selects the field text.
`setFocus()`	`setFocus() => Promise<void>`	Moves keyboard focus into the field.

Types

`SuiInputType` typeThe native `type` values the text-input skin draws. One union for the whole family: the four elements that wrap a native text input each listed a different subset in prose, which read as a rule and was not one. Anything outside this set has its own element (`sui-input-number`, `sui-date-picker`, `sui-color-picker`) or its own skin.
No members.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.

FloatLabel

About

Usage

Basic

States

In a form

Events

Keyboard

API

`<sui-float-label>`

Properties

Events

Methods

Types

Theming

Color12

Typography1

Spacing and size4

Radius1

Motion2

See also