Material3 ‐ TextField

Contents
Demo representation
TextField
OutlinedTextField

Demo representation

Light Theme	Dark Theme

TextField - Normal one

TextField(
                // Setting current value - Which is displayed
                value = valueState,
                // Updating new value to the displayed text
                onValueChange = { updatedText ->
                    if(updatedText.isDigitsOnly()){
                        // Set only if they are digits
                        valueState = updatedText
                    }
                },
                // Always use copy to modify a particular attribute
                textStyle = LocalTextStyle.current.copy(
                    textAlign = TextAlign.Left
                ),
                label = {
                    Text(text = "Enter your height")
                },
                placeholder = {
                    Text(text = "Height")
                },
                leadingIcon = {
                    Icon(
                        imageVector = Icons.Filled.Height,
                        contentDescription = "Person Height"
                    )
                },
                // It is the text that appears before the TEXT that user enters
                suffix = {
                    Text(text = "FEET")
                },
                // Number only
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Number
                ),
                supportingText = {
                    Text(text = "Required Field")
                },
                isError = true
            )
        }

OutlinedTextField - That has borders

OutlinedTextField(
            // Setting current value - Which is displayed
            value = valueStateTwo,
            // Updating new value to the displayed text
            onValueChange = { updatedText ->
                if(updatedText.isDigitsOnly()){
                    // Set only if they are digits
                    valueStateTwo = updatedText
                }
            },
            // Always use copy to modify a particular attribute
            textStyle = LocalTextStyle.current.copy(
                textAlign = TextAlign.Left
            ),
            label = {
                Text(text = "Enter your height")
            },
            placeholder = {
                Text(text = "Height")
            },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Filled.Height,
                    contentDescription = "Person Height"
                )
            },
            // It is the text that appears before the TEXT that user enters
            suffix = {
                Text(text = "FEET")
            },
            // Number only
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number
            ),
            supportingText = {
                Text(text = "Required Field")
            },
        )
    }