Skip to content

Navigation Menu

Sign in
Sign up

TextInput: text size ignores size; add a text-input-control target #6014

Open

Description

Version: @astryxdesign/core 0.5.2, @astryxdesign/theme-neutral 0.5.2

What I'm seeing

size="sm" | "md" | "lg" on TextInput changes the height of the control (24 / 32 / 40px via --size-element-*) and nothing else. The typed text and the placeholder stay at --text-body-size (14px in neutral) in all three. A sm input is therefore body-size text squeezed into a 24px box, and an lg input is the same 14px text floating in a 40px box.

TextArea behaves the same way: sm and md add no styles to the control at all, lg only adds vertical padding.

Quick repro:

<TextInput size="sm" label="Search" placeholder="Search vehicles..." />
<TextInput size="md" label="Search" placeholder="Search vehicles..." />
<TextInput size="lg" label="Search" placeholder="Search vehicles..." />

Inspect the three <input> elements: computed font-size is identical.

What I'd expect

Two options, in order of preference:

  1. Let typography follow size. Something like sm → --font-size-sm, md → --font-size-base, lg → --font-size-lg, so a compact toolbar search and a hero form field don't share the exact same type. The field label already adapts to the size, so the control is the odd one out.

  2. If keeping the type fixed is intentional, expose a text-input-control theme target on the inner <input>, the way 0.5.1 added text-area-control for TextArea. Right now the only reachable targets are text-input (the wrapper), field and field-label. Setting a font size on the wrapper does nothing because the control sets its own, so a theme has no sanctioned way to adjust this per size. With the target we could decide the scale in our own theme and leave the default alone.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      AltStyle によって変換されたページ (->オリジナル) /