import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Radio from '../Radio';

<Meta title="Components/Radio" component={Radio} />

# Radio API

The API documentation of the Radio React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Radio } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Radio id="radio-usage" label="Label" checked readOnly />
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class            | Description                          |
| ----------------------- | ------------------------------------ |
| .ods-radio\_\_root      | Styles applied to the root element.  |
| .ods-radio              | Styles applied to the radio element. |
| .ods-radio\_\_checkmark | Styles applied to the span element.  |
| .ods-checkbox\_\_label  | Styles applied to the span element.  |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Radio/Radio.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      disabled: false,
    }}
    argTypes={{
      label: {
        control: null,
      },
    }}
  >
    {(props) => (
      <form style={{ display: 'inline-grid', gap: 5 }}>
        <Radio label="Yes" name="agreement" value="Y" {...props} />
        <Radio label="No" name="agreement" value="N" {...props} />
      </form>
    )}
  </Story>
</Canvas>
