New to Radix UI and styling components, I encountered difficulties while trying to adapt a JSX component to Radix UI:
Utilizing Radix UI Radio Groups, I aim to style my component similar to this example from Hyper UI with grid layout showing stacked content and checked state: https://i.sstatic.net/FyN7o.png
Key Points
- Incorporating NextJS 13, TypeScript, and React in my project.
- Adjusted the code to display radio icon on selection but experienced issues activating borders.
- The goal is to have block borders with specific styles for selected items.
- Current implementation includes adding {children} to RadioGroupPrimitive.Indicator which is incorrect as it only handles the button, leading to text appearing only upon selection.
Considering exploring options involving labels, given that selection encompasses entire block along with icon, challenges arise in correctly positioning title and subtitle.
Experimenting further, I arrived at:
//Code snippet here
Followed by frontend call like:
<RadioGroupItemModern key={choice.value} value={choice.value} id={choice.value} defaultValue={field.value || ''}>
<div>
<RadioGroupItemTitle>{choice.text}</RadioGroupItemTitle>
<RadioGroupItemSubtitle>{choice.description}</RadioGroupItemSubtitle>
</div>
</RadioGroupItemModern>
Currently, desired result displays only when selection is made (albeit invisible).
Exploring Radix Primitives, experimented with various ways of incorporating children, yet struggling to grasp correct logic due to Radix treating group radio and labels as separate components.