Checkbox Component

packages/docs/src/App.js

@@ -208,12 +208,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: 'Skeleton', path: 'Skeleton' },
           { title: 'Spinner', path: 'Spinner' },

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

@@ -11,16 +11,16 @@ const Documentation = () => {
     >
       <Example>
         <Example.Preview>
-          <Checkbox label="Accept" />
+          <Checkbox label="Normal" />
         </Example.Preview>
         <Example.Code>
           {`
-              <Checkbox />
+              <Checkbox label="Normal" />
             `}
         </Example.Code>
       </Example>
 
-      <Section title="Props">
+      <Section title="Props: Normal">
         <Props
           props={[
             {
@@ -32,6 +32,66 @@ const Documentation = () => {
           ]}
         />
       </Section>
+
+      <Example>
+        <Example.Preview>
+          <Checkbox label="Disabled" disabled />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Checkbox label="Disabled" disabled />
+            `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props: Disabled">
+        <Props
+          props={[
+            {
+              name: 'label',
+              type: 'Text',
+              description: 'label to be displayed',
+              default: '<empty>'
+            },
+            {
+              name: 'disabled',
+              type: 'Boolean',
+              description: 'checkbox button disabled: true or false',
+              default: '<empty>'
+            }
+          ]}
+        />
+      </Section>
+
+      <Example>
+        <Example.Preview>
+          <Checkbox label="Default checked" checked />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Checkbox label="Default checked" checked />
+            `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props: Default Checked">
+        <Props
+          props={[
+            {
+              name: 'label',
+              type: 'Text',
+              description: 'label to be displayed',
+              default: '<empty>'
+            },
+            {
+              name: 'checked',
+              type: 'Boolean',
+              description: 'Default Behaviour Checked',
+              default: '<empty>'
+            }
+          ]}
+        />
+      </Section>
     </Page>
   )
 }

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

@@ -8,6 +8,7 @@ import {
   Heading,
   Input,
   Link,
+  Radio,
   Select,
   Skeleton,
   Spinner,
@@ -106,6 +107,11 @@ const Documentation = () => {
             Reset
           </Button>
         </ComponentCard>
+        <ComponentCard name="Checkbox" gap={4}>
+          <Checkbox label="Normal" />
+          <Checkbox label="Disabled" disabled />
+          <Checkbox label="Default Checked" checked />
+        </ComponentCard>
         <ComponentCard name="Heading" direction="vertical" gap={4}>
           <Heading size="page">Page heading</Heading>
           <Heading size="section" css={{ display: ['none', 'flex', 'flex'] }}>
@@ -147,6 +153,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

@@ -1,11 +1,12 @@
 export { default as Avatar } from './components/avatar'
-export { default as Checkbox } from './components/checkbox'
 export { default as Button } from './components/button'
+export { default as Checkbox } from './components/checkbox'
 export { default as Element } from './components/element'
 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 Skeleton } from './components/skeleton'
 export { default as Spinner } from './components/spinner'

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/skeleton'
 export * from './src/components/spinner'

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

@@ -7,14 +7,16 @@ import { Element } from '../../primitives'
 import { styles } from './checkbox.styles'
 import { merge } from '../../utils'
 
-export const Checkbox = ({ id, label, css, ...props }) => {
+export const Checkbox = ({ id, label, checked, disabled, ...props }) => {
   const inputId = useId(id)
   return (
     <Stack align="center" gap={2}>
       <Element
         as="input"
         type="checkbox"
         component="Checkbox"
+        checked={checked ? checked : null}
+        disabled={disabled ? disabled : null}
         id={inputId}
         {...props}
         css={merge(styles.Checkbox, css)}
@@ -27,7 +29,9 @@ export const Checkbox = ({ id, label, css, ...props }) => {
 }
 
 Checkbox.propTypes = {
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool
 }
 
 Checkbox.defaultProps = {

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

@@ -177,6 +177,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

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

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

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