Skip to content

Floating labels: always float date and time inputs - #42833

Open
mdo wants to merge 3 commits into
v6-devfrom
fix/floating-labels-date-time
Open

Floating labels: always float date and time inputs#42833
mdo wants to merge 3 commits into
v6-devfrom
fix/floating-labels-date-time

Conversation

@mdo

@mdo mdo commented Aug 12, 2026

Copy link
Copy Markdown
Member
  • Keep date, time, datetime-local, month, and week inputs (and selects) in the floated label and padding state, matching how selects already behave.
  • Document the always-floated date and time behavior; file inputs stay unsupported for now.
  • Soften WebKit/Blink date/time separators with the control placeholder color.
  • Show floating-label placeholders on focus, and add .form-floating-always for an always-floated label with a visible placeholder.

Fixes #39257
Supersedes #36155

Date, time, datetime-local, month, and week inputs do not support
placeholders like text fields, so floating labels looked filled even
when empty and padding stayed inconsistent.

Keep those controls (and selects) in the floated label and padding
state, and document the behavior.

Fixes #39257
@mdo
mdo requested review from a team as code owners August 12, 2026 15:36
Comment thread js/tests/types/api.ts

// Internals are protected: consumers cannot reach a component's private state
// @ts-expect-error — _config is protected
tooltipFromElement._config
Comment thread js/tests/types/api.ts
// @ts-expect-error — _config is protected
tooltipFromElement._config
// @ts-expect-error — _element is protected
toast._element

// Internals are protected: consumers cannot reach a component's private state
// @ts-expect-error — _config is protected
tooltipFromElement._config
// @ts-expect-error — _config is protected
tooltipFromElement._config
// @ts-expect-error — _element is protected
toast._element
Comment thread js/tests/types/api.ts
const dialog: Dialog = new Dialog(element, { modal: true, keyboard: false })
const drawer: Drawer = new Drawer(element, { scroll: true })
const popover: Popover = new Popover(element, { content: 'Hello', animation: true })
const range: Range = new Range(element, { formatter: value => `${value} %` })
Comment thread js/tests/types/api.ts
const drawer: Drawer = new Drawer(element, { scroll: true })
const popover: Popover = new Popover(element, { content: 'Hello', animation: true })
const range: Range = new Range(element, { formatter: value => `${value} %` })
const chips: Chips = new Chips(element, { separator: ';', maxChips: 5, allowDuplicates: true })
@mdo
mdo changed the base branch from main to v6-dev August 12, 2026 15:48
@mdo mdo added this to v6.0.0 Aug 12, 2026
@github-project-automation github-project-automation Bot moved this to Inbox in v6.0.0 Aug 12, 2026
mdo added 2 commits August 12, 2026 09:49
Date and time inputs show hard `/` and `:` dividers that fight the
control’s muted placeholder look in WebKit and Blink.

Color those separators with the control placeholder token, and fold the
duplicate date and time docs section into one.
Port the always-visible floating label opt-in from #36155 to the v6
token and label-first :has() model.

Show placeholders on focus by default, and add .form-floating-always
to keep the label floated with a visible placeholder.

Supersedes #36155
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

FloatingLabels not working for input date or input time

1 participant