Filled Auto-resize Text Field

A text field whose label is inside its box and whose text gets smaller to stay in view: an amount, a card's number, a short note, anything that is read whole, in the filled box of PantrixFilledTextField.

import com.pantrixui.components.inputs.filledautoresizetextfield.PantrixFilledAutoResizeTextField

• The label inside the box. At rest label stands in the text's place: in the body size, whatever the text's style. With the focus, or while the field holds a text, it moves up to its own line above the text.
• A box that does not change. The box's width is its style's least or the one its caller gave it; a text that grows longer does not widen it: it is set as small as it takes to fit, and grows back when it is shortened.
• The largest size. textStyle is the style of the text at its largest: a role of the theme's typography, such as title for an amount. A large style makes the box taller only by what its label and one line of that style need.
• The smallest size. minFontSize is the smallest the text gets: a size in sp, or one in em, which is a share of the style's size. It is the theme's footnote size unless given. A text that still does not fit at that size scrolls, as the text of any field does.
• Several lines. In a field of several lines the box grows with its text from the least of its lines to the most; from there the box keeps its height, and the text is set smaller, its line spacing with it.
• A given height. A height the field is given comes before its lines: the box fills what the supporting text leaves of it, and the text is fitted to that height.
• Placeholder. placeholder shows while the label is out of its place: while the field is empty and has the focus. It is in the text's style, and where it is long it shrinks too.
• Fill, outline and error. At rest the box is filled and has no outline; it is outlined with the focus and in error. error does not change the label's colour. A disabled field has no fill.
• Three overloads. In the one that takes a state the text is read from the state. The one that takes a value and an onValueChange keeps the text with its caller, and takes its lines as singleLine, minLines and maxLines. The one that takes a field is bound to a form's field.
• Automation key. With tagKey the field is named FilledAutoResizeTextField_<tagKey>, and its clear button FilledAutoResizeTextFieldClear_<tagKey>. The field reports that it took the focus and that it was cleared, and never its text.

Examples

At its plainest

The least there is to write: a TextFieldState and a label. The field was given no width: the box is at its style's least width and does not grow wider with its text. The account name is too long for that box, so it is drawn smaller; and since the field holds a text, the label is on its own line above the text.

Delete the text: what is left grows back. Once the field is empty and loses the focus, the label comes down to the text's place.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("Yılmaz Mimarlık ve Mühendislik Limited Şirketi"),
    label = "Account name",
    tagKey = "account_name"
)

The text style and the box's height

textStyle is the style of the text at its largest; without it the text is in the body size. A large style makes the box taller only by what its label and one line of that style need: compare the first two fields.

The third field is empty and in the display style. Whatever the text's style, the label rests in the text's place in the body size. Press the field: the label moves up, and the placeholder appears in the text's style.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("1250"),
    modifier = Modifier.fillMaxWidth(),
    label = "No style given",
    tagKey = "style_body"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("1250"),
    modifier = Modifier.fillMaxWidth(),
    label = "In the title style",
    textStyle = PantrixTheme.typography.title,
    tagKey = "style_title"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "In the display style, empty",
    placeholder = "0",
    textStyle = PantrixTheme.typography.display,
    tagKey = "style_display"
)

The smallest size

Both fields hold the same name in the title style, and the name fits neither box. The first was given no minFontSize: the text shrinks as far as the theme's footnote size. In the second it is never set smaller than 16 sp. minFontSize can also be given in em: it is then a share of the style's own size.

A text that still does not fit at its smallest size stops shrinking and scrolls, as the text of any field does.

val company = "Yılmaz Mimarlık, Mühendislik ve Danışmanlık Limited Şirketi"
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(company),
    label = "Not given: footnote size",
    textStyle = PantrixTheme.typography.title,
    tagKey = "smallest_default"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState(company),
    label = "Smallest 16 sp",
    textStyle = PantrixTheme.typography.title,
    minFontSize = 16.sp,
    tagKey = "smallest_sp"
)

An amount that carries its text to a ViewModel

A payment amount, in the headline style. The field's state is created with rememberTextFieldState, from the value the ViewModel holds at that moment; the text in the state is followed with snapshotFlow, and every change is reported to the ViewModel. This is how the text is taken from the field's state.

The first value in the ViewModel is read once. From then on it goes one way: the text flows from the field to the ViewModel. When the screen is composed anew the ViewModel is still there, and the field starts with its value.

The line below shows what the ViewModel holds, and the button reads from it too: it cannot be pressed until an amount has arrived.

val viewModel = viewModel(key = "payment") { PaymentViewModel() }
val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val initialUiState = remember(viewModel) { viewModel.uiState.value }
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

val amount = rememberTextFieldState(initialUiState.amount)
LaunchedEffect(amount) {
    snapshotFlow { amount.text.toString() }.collectLatest { viewModel.updateAmount(it) }
}
PantrixFilledAutoResizeTextField(
    state = amount,
    modifier = Modifier.fillMaxWidth(),
    label = "Amount to pay",
    placeholder = "0",
    supportingText = "Shrinks as you type, grows back as you delete",
    trailingIcon = { PantrixText(text = "TL") },
    showClearButton = true,
    textStyle = PantrixTheme.typography.headline,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    inputTransformation = DigitsOnly,
    tagKey = "payment_amount"
)

PantrixText(
    text = "ViewModel: amount \"${uiState.amount}\", digits: ${uiState.amount.length}",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "payment_state"
)
PantrixButton(
    text = "Pay",
    onClick = {
        scope.launch { snackbars?.show(message = "${uiState.amount} TL paid", tagKey = "payment_made") }
    },
    enabled = uiState.isComplete,
    tagKey = "pay"
)

private class PaymentViewModel : ViewModel() {
    private val state = MutableStateFlow(PaymentUiState())
    val uiState: StateFlow<PaymentUiState> = state.asStateFlow()

    fun updateAmount(amount: String) {
        state.update { it.copy(amount = amount) }
    }
}

private data class PaymentUiState(val amount: String = "") {
    val isComplete: Boolean get() = amount.isNotEmpty() && amount.any { it != '0' }
}

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

A field whose text is held as a String

A customer number of twelve digits. The caller holds the number as a String: the field shows it and asks for every change, and since a change that is not all digits is not taken, it is not shown either. The supporting text is made from that String.

The text that is asked for has to come back as value by the next frame, or the field shows the old text and the caret jumps: keep the text in state that the callback writes at once, and choose the overload that takes a state when the text lives in a flow.

var number by rememberSaveable { mutableStateOf("") }
val missing = 12 - number.length
PantrixFilledAutoResizeTextField(
    value = number,
    onValueChange = { if (it.all(Char::isDigit)) number = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Customer number",
    supportingText = if (missing == 0) "Number complete" else "Digits to go: $missing",
    maxLength = 12,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.title,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    tagKey = "customer_number"
)

A reference code bound to a form

The overload that takes a field gets its value, its error and its name from its field in the form: leave the code empty and move on, and the rule's message takes the place of the supporting text. In a field that is given form, the keyboard's action key submits the form through the "Save reference" button.

The text of a field bound to a form is the value of the form's field: it does not have to be taken separately.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixFilledAutoResizeTextField(
    field = form.field("reference", initial = "", Rules.notBlank("Enter a reference code")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Reference code",
    supportingText = "The code on the receipt",
    showClearButton = true,
    maxLength = 40,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters)
)
PantrixButton(
    text = "Save reference",
    onClick = {
        scope.launch {
            form.submit { snackbars?.show(message = "Reference saved", tagKey = "reference_saved") }
        }
    },
    form = form,
    tagKey = "save_reference"
)

An address of several lines

A delivery address of several lines. The caller holds the address as a String; in this overload the field takes its lines as singleLine, minLines and maxLines. The box is two lines tall and grows to three; once the address passes three lines the box stays as it is, and the text is set as small as it takes to fit, its line spacing with it.

The supporting text is made from the String the caller holds. Its limit is 240 characters; its count is hidden with showCharacterCount = false.

var address by rememberSaveable { mutableStateOf("") }
PantrixFilledAutoResizeTextField(
    value = address,
    onValueChange = { address = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Delivery address",
    supportingText = if (address.isBlank()) "Neighbourhood, street, house number" else "Characters: ${address.length}",
    showClearButton = true,
    maxLength = 240,
    showCharacterCount = false,
    singleLine = false,
    minLines = 2,
    maxLines = 3,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
    tagKey = "delivery_address"
)

Supporting text and error

supportingText stands under the box. error = true outlines the box in the danger colour; the supporting text and the caret turn to that colour too, and a screen reader announces the message as the error. The label keeps its own colour.

The field starts in error: the plate has lowercase letters. Type them again in capitals: the error goes. It is the caller, not the field, that works out the error; here by reading plate.text.

val plate = rememberTextFieldState("34 abc 1903")
val lowercase = plate.text.any(Char::isLowerCase)
PantrixFilledAutoResizeTextField(
    state = plate,
    modifier = Modifier.fillMaxWidth(),
    label = "Licence plate",
    supportingText = if (lowercase) "Type the plate in capitals" else "As written on the registration document",
    error = lowercase,
    showClearButton = true,
    maxLength = 12,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.title,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters),
    tagKey = "plate"
)

Disabled and read-only

enabled = false takes the field's fill away: the field is drawn in the theme's disabled text colour and takes no focus. Its text is still fitted to its box: the IBAN is in the title style, and is set smaller in a box it does not fit.

With readOnly = true the field keeps its fill: it can be focused, and its text selected and copied; it just cannot be changed.

PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("TR330006100519786457841326"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Saved IBAN",
    supportingText = "Disabled: in the title style, shrunk to fit",
    textStyle = PantrixTheme.typography.title,
    tagKey = "saved_iban"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("PX-2026-0914-TR-000187"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "Contract number",
    supportingText = "Read-only: it can be selected and copied",
    textStyle = PantrixTheme.typography.title,
    tagKey = "contract_no"
)

Its own colours and style

This field takes the filled text field's FilledTextFieldColors and FilledTextFieldStyle: the filled fields are restyled together.

The first field's fill, label, text, outline and caret are from the app's own purple; the fill with the focus was not given, and is the theme's surface colour. The second's box is fully round: FilledTextFieldStyle(shape = ShapeRole.Full). textStyle is the style of the text, style that of the box.

val own = ownColors()
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("Summer 2026 Collection"),
    modifier = Modifier.fillMaxWidth(),
    label = "List name",
    textStyle = PantrixTheme.typography.title,
    colors = FilledTextFieldColors(
        container = own.container,
        focusedOutline = own.color,
        text = own.onContainer,
        label = own.onContainer,
        cursor = own.color
    ),
    tagKey = "own_colors"
)
PantrixFilledAutoResizeTextField(
    state = rememberTextFieldState("KP-48213"),
    modifier = Modifier.fillMaxWidth(),
    label = "Coupon",
    textStyle = PantrixTheme.typography.title,
    style = FilledTextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)

API

state

A text field whose label is inside its box and whose text gets smaller to stay in view: an amount, a card's number, a short note, anything that is read whole, in the filled box of PantrixFilledTextField.

value

A filled text field whose text shrinks to fit, and whose text is a String its caller holds: value is what it shows, and onValueChange is asked for every change the user makes.

field

A filled text field whose text shrinks to fit, bound to a form's field: its text, its error and its name come from field.

FilledTextFieldStyle

PantrixFilledTextField's box: its shape, how tall and how wide it is at the least, the room around what it holds, its icons and its outline.

FilledTextFieldColors

What PantrixFilledTextField is painted with, for a field that does not take the theme's: a colour that is set is used, and one that is left out stays the theme's role. A product gives the colours it changes and no others: