How to make an text input field full width?

[kalnode]

Not seemingly a bug, so posting here; am I wrong?

I spent too-much-time wrestling with what is seemingly a silly thing. Randomly tried something that worked. Sharing observation.

Question:

How do you make a text input field fill 100% of the container width?

<TextInput value={myValue}
onChange={(event) => { myFunction(event.target.value) }}
label="My text field" placeholder="Enter something here" name="myTextField" />

Using the typical width="100%", or style={{width: "100%"}}, seems to have no effect.

---

Answer:

Looks like you need to wrap the field in a Box that has 100% width. Is there a better way?

In any case, this wasn't obvious to me from any docs or resources.

<Box width="100%">
  <TextInput value={myValue}
  onChange={(event) => { myFunction(event.target.value) }}
  label="My text field" placeholder="Enter something here" name="myTextField" />
</Box>