How can I have where the 'other' turns into a button where the user can input as much money as they want?

Question

How can I have where the 'other' turns into a button where the user can input as much money as they want? I tried creating a const other with a button and putting {other} in the options tab like this options={['$5', '$10', '$20', '$50', '$100', {other}]} but that did not work. I am Using Grommet UI, Any suggestions are appreciated. Thank You.

           <RadioButtonGroup direction="row" required
           gap="xlarge"
           id="example2-id"
           name="example2"
           options={['$5', '$10', '$20', '$50', '$100', 'other']}
           />

Answer 1

Radiobuttons return a preset value, if you want to allow the user to input a custom value I suggest adding a TextInput under your Radiobutton and wrap it in a form.