Added: Radio Component

packages/docs/src/App.js

@@ -205,12 +205,13 @@ const ComponentNav = () => {
       <NavSection
         items={[
           { title: 'Avatar', path: 'Avatar' },
-          { title: 'Checkbox', path: 'Checkbox' },
           { title: 'Button', path: 'Button' },
+          { title: 'Checkbox', path: 'Checkbox' },
           { title: 'Heading', path: 'Heading' },
           { title: 'Image', path: 'Image' },
           { title: 'Input', path: 'Input' },
           { title: 'Link', path: 'Link' },
+          { title: 'Radio', path: 'Radio' },
           { title: 'Select', path: 'Select' },
           { title: 'Spinner', path: 'Spinner' },
           { title: 'Switch', path: 'Switch' },

packages/docs/src/pages/components/index.js

@@ -7,6 +7,7 @@ import {
   Heading,
   Input,
   Link,
+  Radio,
   Select,
   Spinner,
   Switch,
@@ -148,6 +149,11 @@ const Documentation = () => {
             Open GitHub repository
           </Link>
         </ComponentCard>
+        <ComponentCard name="Radio" gap={4}>
+          <Radio label="Normal" />
+          <Radio disabled label="Disabled" />
+          <Radio checked label="Default Select" />
+        </ComponentCard>
         <ComponentCard name="Select">
           <Stack direction="vertical" gap={2} css={{ width: '280px' }}>
             <Select>

packages/docs/src/pages/components/radio.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Radio } from 'react-ui'
+import { Table, Page, Section, Props, Badge, Example } from '../../components'
+
+const Documentation = () => {
+  return (
+    <Page
+      title="Radio"
+      tagline="A radio component."
+      badges={[<Badge key={0}>accessible</Badge>]}
+    >
+      <Example>
+        <Example.Preview>
+          <Radio label="Normal" value="Normal" />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Normal" value="Normal" />
+            `}
+        </Example.Code>
+        <Example.Preview>
+          <Radio label="Disabled" value="Disabled" disabled />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Disabled" value="Disabled" disabled />
+            `}
+        </Example.Code>
+        <Example.Preview>
+          <Radio label="Default Checked" value="Default" checked />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Default Checked" value="Default" checked />
+            `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props">
+        <Props
+          props={[
+            {
+              name: 'label',
+              type: 'Text',
+              description: 'label to be displayed',
+              default: '<empty>'
+            },
+            {
+              name: 'value',
+              type: 'Text',
+              description: 'value associated to the radio button',
+              default: '<empty>'
+            },
+            {
+              name: 'disabled',
+              type: 'Boolean',
+              description: 'Radio button disabled: true or false',
+              default: '<empty>'
+            },
+            {
+              name: 'checked',
+              type: 'Boolean',
+              description: 'Default behaviour checked or not',
+              default: '<empty>'
+            }
+          ]}
+        />
+      </Section>
+    </Page>
+  )
+}
+
+export default Documentation

packages/docs/src/pages/index.js

@@ -6,6 +6,7 @@ export { default as Heading } from './components/heading'
 export { default as Image } from './components/image'
 export { default as Input } from './components/input'
 export { default as Link } from './components/link'
+export { default as Radio } from './components/radio'
 export { default as Select } from './components/select'
 export { default as Spinner } from './components/spinner'
 export { default as Switch } from './components/switch'

packages/react-ui/index.js

@@ -7,6 +7,7 @@ export * from './src/components/heading'
 export * from './src/components/image'
 export * from './src/components/input'
 export * from './src/components/link'
+export * from './src/components/radio'
 export * from './src/components/select'
 export * from './src/components/spinner'
 export * from './src/components/switch'

packages/react-ui/src/components/radio/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useId } from '@reach/auto-id'
+import { Text } from '../text'
+import { Stack } from '../stack'
+import { Element } from '../../primitives'
+import { merge } from '../../utils'
+
+export const Radio = ({ id, label, disabled, checked, value, ...props }) => {
+  const inputId = useId(id)
+  return (
+    <Stack align="center" gap={2}>
+      <Element
+        as="input"
+        type="radio"
+        component="Radio"
+        id={inputId}
+        value
+        disabled={disabled ? disabled : null}
+        checked={checked ? checked : null}
+        {...props}
+      />
+      <Text as="label" htmlFor={inputId}>
+        {label}
+      </Text>
+    </Stack>
+  )
+}
+
+Radio.propTypes = {
+  label: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  value: PropTypes.string.isRequired
+}
+
+Radio.defaultProps = {}

packages/react-ui/src/components/radio/radio.styles.js

@@ -0,0 +1,3 @@
+export const styles = {
+  Radio: {}
+}

packages/react-ui/src/themes/base.js

@@ -167,6 +167,9 @@ const components = {
       }
     }
   },
+  Radio: {
+    border: '1px solid'
+  },
   Select: {
     // recommended: match styles of input
     sizes: { small: 6, medium: 8, large: 10 },

packages/react-ui/src/themes/dark.js

@@ -355,6 +355,9 @@ const components = {
       }
     }
   },
+  Radio: {
+    border: '1px solid'
+  },
 
   Select: {
     // recommended: match styles of input

packages/react-ui/src/themes/light.js

@@ -339,7 +339,9 @@ const components = {
       }
     }
   },
-
+  Radio: {
+    border: '1px solid'
+  },
   Select: {
     // recommended: match styles of input
     sizes: { small: 6, medium: 8, large: 10 },