How to set the size of gr.Radio

[violet17]

I have 8 radiobuttons in my app, but I can't find the way to set the size of gr.Radio to make them looks in two columns and each column is left aglinment. Thanks. In the image above, the second column is not left aglinment, whick looks out of order.

Can you share the way to set the size of gr.Radio?

[abidlabs]

Hi @violet17 this isn't possible unfortunately with the gr.Radio component. We're not likely to implement this functionality in gr.Radio, but we are opening up support for custom, community-designed components. I'll leave this and mark it as a "new component" label, as it could fit in that category.

[violet17]

Hi @abidlabs Thank you very much for you reponse. It would be better if we have more choices for the UI setting.

[hannahblair]

Hi @violet17! You could try tweaking this using custom CSS.

This is my example with 8 radio buttons:

import gradio as gr 

css="""
.radio-group .wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}
"""

with gr.Blocks(css=css) as demo:
    with gr.Row():
        gr.Radio(elem_classes="radio-group", choices=["Choice", "Choice",  "Choice",  "Choice",  "Choice",  "Choice",  "Choice",  "Choice"])

demo.launch()

I've changed the layout of the radio wrap component to be a CSS grid with two fixed columns. This is what that looks like:

Does that solve your problem? 🙂

[violet17]

@hannahblair Thank you very much!!! It really helps a lot!!!