---
name: RadioField
menu: Components
route: /components/radio-field
---

import { RadioField } from './';
import { InputField } from '../InputField';
import { Playground } from 'docz';

# RadioField

Info here

## Import

```js
import { RadioField } from '@firstclasspostcodes/sw13';
// or
import { RadioField } from '@firstclasspostcodes/sw13/lib/components/RadioField';
```

## Example

<Playground>
  <RadioField name="test" value="read-only" onChange={val => console.log(val)} options={[
    { label: 'Read-only', value: 'read-only' },
    { label: 'Write', value: 'write', hint: 'You will be emailed a code for confirmation.', description: 'Write access to the resource' },
    { label: 'Restricted', value: 'restricted' },
  ]}/>
</Playground>

You can also use this component in combination with the `<InputField/>` component:

<Playground>
  <InputField 
    input={(props) => <RadioField {...props} />}
    inputProps={{
      onChange: (val, event) => console.log(event.target.checked),
      value: 'write',
      options: [
        { label: 'Read-only', value: 'read-only' },
        { label: 'Write', value: 'write', hint: 'You will be emailed a code for confirmation.', description: 'Write access to the resource' },
        { label: 'Restricted', value: 'restricted', disabled: true },
      ],
    }}
    id="permissions"
    label="Permissions"
    invalid="Cannot grant write access."
    description="Set file permissions for admin access."
  />
</Playground>