Merge pull request #16 from holaplex/anshul/radio-customization

Enable custom radio button using tailwind peer

Author: alchemistgo87

packages/@holaplexui-playground/pages/form.tsx

@@ -223,6 +223,33 @@ export default function App() {
             <Form.RadioGroup.Radio value='Mango' name='fruits' />
           </Form.Label>
         </Form.RadioGroup>
+
+        <Form.RadioGroup className='mt-5'>
+          <Form.Label
+            name='Red'
+            htmlFor='red'
+            peerClassName='peer-checked:text-red-500'
+          >
+            <Form.RadioGroup.Radio
+              id='red'
+              value='red'
+              name='color'
+              className='peer hidden'
+            />
+          </Form.Label>
+          <Form.Label
+            name='Green'
+            htmlFor='green'
+            peerClassName='peer-checked:text-green-500'
+          >
+            <Form.RadioGroup.Radio
+              id='green'
+              value='green'
+              name='color'
+              className='peer hidden'
+            />
+          </Form.Label>
+        </Form.RadioGroup>
       </Form>
     </div>
   );

packages/@holaplexui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

packages/@holaplexui-react/src/components/Form.tsx

@@ -32,13 +32,15 @@ interface FormLabelProps
   extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
   name: string;
   placement?: Placement;
+  peerClassName?: string;
   asideComponent?: JSX.Element;
 }
 
 function FormLabel({
   name,
   placement = Placement.Top,
   asideComponent,
+  peerClassName,
   className,
   children,
   ...props
@@ -48,21 +50,21 @@ function FormLabel({
       className={clsx(
         'flex',
         {
-          'flex-col': placement === Placement.Top,
-          'flex-col-reverse': placement === Placement.Bottom,
-          'flex-row-reverse items-center': placement === Placement.Right,
-          'flex-row items-center': placement === Placement.Left,
+          'flex-col': placement === Placement.Bottom,
+          'flex-col-reverse': placement === Placement.Top,
+          'flex-row-reverse items-center': placement === Placement.Left,
+          'flex-row items-center': placement === Placement.Right,
         },
         'form-label',
         className
       )}
       {...props}
     >
-      <div className="flex w-full justify-between items-center">
+      {children}
+      <div className={clsx('flex w-full justify-between items-center', peerClassName)}>
         <span className="form-label-text">{name}</span>
         {asideComponent}
       </div>
-      {children}
     </label>
   );
 }