RadioGroup in TouchUI Component - aem

Question

I was developing touch UI component. Below is what i tried and worked at some extent. Below is dialog.xml
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<herotext
jcr:primaryType="nt:unstructured"
jcr:title="Hero Text Properties"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<myradiogroup
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radiogroup"
fieldLabel="Select Fruit"
name="./fruit">
<items jcr:primaryType="nt:unstructured">
<option1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radio"
cq-msm-lockable="fruit"
renderReadOnly="{Boolean}true"
text="Apple"
value="apple"/>
<option2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/radio"
cq-msm-lockable="fruit"
renderReadOnly="{Boolean}true"
text="Pear"
value="pear"/>
</items>
</myradiogroup>
</items>
</column>
</items>
</herotext>
</items>
</content>
After this I am able to render the radio selected value on the page. But having below issue.
1) Radio options are coming in vertical direction, but i want them in horizontal.
2) Radio Group Name not display, I want same like as fieldLabel & want to hide hide the border line.
3) When i reopen the dialog, radiobutton is not selected even if the selected value stored in JCR during last submit.
Thanks

Answer 1

For getting the Radio Buttons in horizontal direction use following class as property with coral-RadioGroup--horizontal value. This is the OOTB class provided by AEM, you can also have your custom class to control layout and alignment
For displaying the Radio Button Group label use text property.
On opening the dialog, properties are populating fine. See if you have any other radiobuttongroup in same dialog with same name.