Skip to content

Compose CardFields: styling API for error text, typography and field layout #1754

Open

Description

@Dwite

Is your feature request related to a problem? Please describe.

We are moving our Android card form to the Compose CardFields (ui-components 5.34.0) and want it to match our design system. CardFields(controller, modifier) takes no styling parameters, and the building blocks (CardFieldBaseTextInputField, the field composables, the error row) are internal or private. The only styling route is overriding the card_field_* resources by name. That covers colors and sizes, but several parts cannot be changed at all:

  1. Error text color. CardFieldErrorMessage draws the error text with R.color.card_field_text, the same color as the typed digits. A red error message is impossible without red card digits. card_field_error applies only to the icon and border.
  2. Error icon. The icon can only be replaced by overriding the ic_card_field_error drawable. There is no way to omit it; we ship a 1dp transparent vector to hide it.
  3. Input typography. The BasicTextField text style sets only color and size, so the typed digits always use the system font. The hint follows LocalTextStyle, so hint and input end up in different fonts.
  4. Field height. The CVV help IconButton (CardCvvField.kt) has the 48dp minimum touch target. With card_field_min_height below 48dp, the CVV field is taller than the expiration field next to it, and the error rows under them do not line up.
  5. Floated hint overlap. The floated hint and the input are positioned independently (card_field_hint_float_top_margin from the top, card_field_input_margin_bottom from the bottom). With a smaller min height, a long hint such as "Expiration (MM/YY)" overlaps the typed text.
  6. Autofill and IME. The fields set no contentType (credit card number, expiration, security code) and no IME action, so password-manager autofill and keyboard "Next" do not work.

Describe the solution you'd like.

As an app developer using the Compose CardFields, I want to style the fields from Compose so that the card form matches the rest of my app.

For example:

  • A CardFieldsStyle / CardFieldsColors parameter on CardFields (input text style, hint text style, error text style and color, border colors and widths, shape, min height), with defaults equal to the current resource values.
  • An error slot, for example errorContent: @Composable (String) -> Unit, or at least a separate card_field_error_text color resource and an option to hide the icon.
  • Input text that respects LocalTextStyle (or the style parameter above).
  • Layout where the hint and input cannot overlap at any supported min height, and where all fields in a row have the same height.
  • contentType semantics for autofill, and ImeAction.Next / Done between the fields.

Happy to share more detail or test a snapshot build.

Activity

  1. mzlangreder commented on Nov 9, 2026

    @mzlangreder
    Contributor

    Hi @Dwite , thank you for the feedback. We're going to get to work planning and scoping these improvements for CardFields.

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