Hi, I'm having trouble with restricting the size o...

# compose

[Jonas]

Hi, I'm having trouble with restricting the size of an OutlinedTextField ;

[Jonas]

Consider this Composable:

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun Input() {
    Column(modifier = Modifier.width(IntrinsicSize.Max)) {
        OutlinedTextField(
            modifier = Modifier.defaultMinSize(minWidth = Dp.Unspecified),
            value = "Hello",
            onValueChange = {},
            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
            singleLine = true
        )
        Spacer(modifier = Modifier.height(4.dp))
        Row(
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            val size = ButtonDefaults.ExtraSmallContainerHeight
            OutlinedButton(
                onClick = { },
                modifier = Modifier.heightIn(size),
                contentPadding = ButtonDefaults.contentPaddingFor(size),
                shape = ButtonDefaults.squareShape,
                border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
            ) {
                Text(
                    text = "A",
                    style = ButtonDefaults.textStyleFor(size)
                )
            }
            Button(
                onClick = { },
                modifier = Modifier.heightIn(size),
                contentPadding = ButtonDefaults.contentPaddingFor(size),
                shape = ButtonDefaults.squareShape,
                border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)

            ) {
                Text(
                    text = "B",
                    style = ButtonDefaults.textStyleFor(size)
                )
            }
            OutlinedButton(
                onClick = { },
                modifier = Modifier.heightIn(size),
                contentPadding = ButtonDefaults.contentPaddingFor(size),
                shape = ButtonDefaults.squareShape,
                border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)

            ) {
                Text(
                    text = "C",
                    style = ButtonDefaults.textStyleFor(size)
                )
            }
            OutlinedButton(
                onClick = { },
                modifier = Modifier.heightIn(size),
                contentPadding = ButtonDefaults.contentPaddingFor(size),
                shape = ButtonDefaults.squareShape,
                border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)

            ) {
                Text(
                    text = "D",
                    style = ButtonDefaults.textStyleFor(size)
                )
            }
        }
    }
}

[Jonas]

Looks like this:

[Jonas]

I'd like to restrict the width of the OutlinedTextField to the width of the 4 buttons.

[Jonas]

I experimented with IntrinsicSize.Max but had no luck. Somehow the Textfield sees to have an internal min width that takes precedence over the width of the buttons.

[Filip Wiesner]

The text field has min width of 280 dp. The documentatin notes

The default min width applied to an OutlinedTextField. Note that you can override it by applying Modifier.widthIn directly on a text field.

[Jonas]

I tried overriding it but still had no luck

[Jonas]

See the Modifier.defaultMinSize(minWidth = Dp.Unspecified)

[Jonas]

With widthIn the text field is always smaller than the buttons.

[Jonas]

Modifier.widthIn(min = 0.dp),

Looks like this:

[Jonas]

Modifier.widthIn(min = 200.dp)

looks like this:

[Filip Wiesner]

Hmmm, I am not sure how well does text field work with Intrinsics 🤔
What you usually do is set the container intrinsic width to Min and the children to fillMaxWidth. But in this case the button Row is always large so it seems to me that the textfield is reporting it's intrinsic width to be much larger than it actually is. But I don't know enough about this to be certain.
When I tried using just the BasicTextField and borrowed the decoration box from the outlined text field (OutlinedTextFieldDefaults.DecorationBox), it seems to work correctly. So you might try experimenting with that

[Jonas]

Thanks! I'll try that

[Filip Wiesner]

I was able to do this. ( I am removing the buttons with Hot Reload)

Kapture 2025-10-28 at 12.36.07.mp4

[Jonas]

Nice! Can you paste the snippet?

[Filip Wiesner]

Sure, but it's just a hacked together UI that does not work. I was just trying how it works

[Jonas]

Sure, no worries

[Filip Wiesner]

Column(modifier = Modifier.width(IntrinsicSize.Min)) {
    BasicTextField(
        value = "Hello",
        onValueChange = {},
        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
        singleLine = true,
        decorationBox = { innerTextField ->
            OutlinedTextFieldDefaults.DecorationBox(
                value = "value",
                innerTextField = innerTextField,
                enabled = true,
                singleLine = true,
                visualTransformation = VisualTransformation.None,
                interactionSource = MutableInteractionSource(),
                container = {
                    OutlinedTextFieldDefaults.Container(
                        enabled = true,
                        isError = false,
                        interactionSource = MutableInteractionSource(),
                    )
                },
            )
        },
        modifier = Modifier.fillMaxWidth()
    )

    Spacer(modifier = Modifier.height(4.dp))
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxWidth(),
    ) {
        val size = 48.dp
        OutlinedButton(
            onClick = { },
            modifier = Modifier.heightIn(size),
            border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
        ) {
            Text(
                text = "A",
            )
        }


        OutlinedButton(
            onClick = { },
            modifier = Modifier.heightIn(size),
            border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)

        ) {
            Text(
                text = "D",
            )
        }
    }
}

[Jonas]

Thanks a ton, Filip!

[Filip Wiesner]

I just copied the decorationBox from the sources of OutlinedTextField. I am not sure if you need all of that. Good luck ☺️

[Jonas]

Thanks! I'll see how far I can get 😄