Date Filled Text Field

A filled text field for a day: the day is typed in digits, or chosen from a calendar that a button at the box's end opens. It is PantrixDateTextField in a filled box.

import com.pantrixui.components.date.datefilledtextfield.PantrixDateFilledTextField

• The same field. The digits, the format, its own errors, the calendar and the three overloads (value, state, field) are PantrixDateTextField's; only the box is drawn as PantrixFilledTextField's.
• Style and colours. style (FilledTextFieldStyle) and colors (FilledTextFieldColors) are the box's, pickerStyle and pickerColors the calendar's.

Examples

A birthday

A birthday, in a filled box: a day after today is not taken. The label moves up as the field takes the focus, and the pattern shows.

var birthday by remember { mutableStateOf<PantrixDate?>(null) }
PantrixDateFilledTextField(
    value = birthday,
    onValueChange = { birthday = it },
    label = "Birthday",
    maxDate = rememberToday(),
    showClearButton = true,
    tagKey = "birthday"
)

The calendar in a dialog

A delivery day on a weekday; the calendar opens in a dialog in the middle of the window.

var delivery by remember { mutableStateOf<PantrixDate?>(null) }
val today = rememberToday()
PantrixDateFilledTextField(
    value = delivery,
    onValueChange = { delivery = it },
    label = "Delivery day",
    minDate = today.plusDays(1),
    maxDate = today.plusMonths(1),
    isDateEnabled = { it.dayOfWeek <= FRIDAY },
    presentation = DatePickerPresentation.Dialog,
    tagKey = "delivery"
)

private const val FRIDAY = 5

The app's error and disabled

The app's error and a disabled field, in a filled box.

var meeting by remember { mutableStateOf<PantrixDate?>(PantrixDate(2026, 11, 2)) }
val taken = meeting == PantrixDate(2026, 11, 2)
PantrixDateFilledTextField(
    value = meeting,
    onValueChange = { meeting = it },
    label = "Meeting day",
    supportingText = if (taken) "This day is taken, choose another" else "A day the office is open",
    error = taken,
    tagKey = "meeting"
)
PantrixDateFilledTextField(
    value = PantrixDate(2026, 10, 1),
    onValueChange = {},
    enabled = false,
    label = "Contract start",
    tagKey = "contract"
)

Bound to a form

Bound to a form's field, in a filled box: with no day, "Save" shows the error.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val report = LocalExampleEvents.current
val start = form.field<PantrixDate?>("start", initial = null, Rules.required("Enter the start day"))
PantrixDateFilledTextField(
    field = start,
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Start day",
    minDate = rememberToday()
)
PantrixButton(
    text = "Save",
    onClick = { scope.launch { form.submit { report("Saved") } } },
    form = form,
    tagKey = "save_start"
)

On a state

On a state: state.date is the field's day, state.text the digits typed. Together they tell an empty field from a half-typed one. The button changes the state's day, and the field writes it in itself.

val state = rememberDateTextFieldState()
val today = rememberToday()
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixDateFilledTextField(
        state = state,
        label = "Report day",
        tagKey = "report_day"
    )
    PantrixText(
        text = when {
            state.date != null -> "Day: ${state.date}"
            state.text.isEmpty() -> "The field is empty"
            else -> "Half typed: ${state.text}"
        },
        style = PantrixTheme.typography.body
    )
    PantrixButton(
        text = "Write today",
        onClick = { state.date = today },
        variant = ButtonVariant.Outline,
        tagKey = "write_today"
    )
}

API

value

A filled text field for a day: the day is typed in digits, or chosen from a calendar that a button at the box's end opens. It is PantrixDateTextField in a filled box.

state

A date field on a state its caller keeps, as PantrixDateFilledTextField of a value is in every other way: the state's date is the field's day, setting it writes the day in, and its text tells a field that is half typed from an empty one.

field

A date field bound to a form's field: its day, 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: