import { useState } from 'react'
import Radio from '../Radio'
import Span from '../../typography/Span'
import Div from '../../Div'
import Br from '../../Br'
import { Sandbox } from '@startupjs/docs'

# Radio

Radio button allows the user to select one option from a list.

```jsx
import { Radio } from from '@startupjs/ui'
```

## Simple example

```jsx example
const [checked, setChecked] = useState()
return (
  <Radio
    value={checked}
    onChange={(value) => setChecked(value)}
    options={[
      {
        value: 'js',
        label: 'JavaScript',
        description: 'Scripting language which helps you create interactive web pages'
      },
      {
        value: 'php',
        label: 'PHP',
        description: 'Server side scripting language'
      },
    ]}
  />
)
```

## Disabled

```jsx example
const [checked, setChecked] = useState()

return (
  <Radio
    value={checked}
    onChange={(value) => setChecked(value)}
    options={[
      {
        value: 'js',
        label: 'JavaScript'
      },
      {
        value: 'php',
        label: 'PHP'
      },
    ]}
    disabled
  />
)
```

## Readonly

```jsx example
const [checked, setChecked] = useState('js')

return (
  <Radio
    value={checked}
    onChange={(value) => setChecked(value)}
    options={[
      {
        value: 'js',
        label: 'JavaScript'
      },
      {
        value: 'php',
        label: 'PHP'
      },
    ]}
    readonly
  />
)
```

## Sandbox

<Sandbox
  Component={Radio}
  props={{
    options:[
      {
        value: 'red',
        label: 'Red'
      },
      {
        value: 'blue',
        label: 'Blue'
      }
    ],
    value: 'red',
    onChange: value=> alert('Enter "' + value + '" in the value input')
  }}
/>