# Add Radio Button Field

A radio button allows a signer to select only one option from a predefined list of choices. When presented as a group, selecting one radio button will automatically deselect any previously selected option within that group, ensuring that only one option can be chosen at a time.

BoldSign provides support for adding radio buttons to your document before sending it to the signer, enabling them to make a choice by clicking on the radio button.

## Send a document with radio buttons
To send a document with a radio buttons, set the `fieldType` as `RadioButton`. Additionally, you need to specify a `groupName` to group related radio buttons together.

Here are example codes that demonstrate how to achieve this:

### Code snippet

{% codetab id="codetab1" %}

cURL

```shell 
curl -X 'POST' \ 'https://api.boldsign.com/v1/document/send' \
     -H 'accept: application/json' \
     -H 'X-API-KEY: {your API key}' \
     -H 'Content-Type: multipart/form-data' \
     -F 'Message=' \
     -F 'Signers=
     {
        "name": "Hanky",
        "emailAddress": "hankyWhites@cubeflakes.com",
        "signerType": "Signer",
        "formFields": [
           {
                "id": "string",
                "name": "string",
                "fieldType": "RadioButton",
                "groupName": "Group1",
                "pageNumber": 1,
                "bounds": {
                  "x": 50,
                  "y": 50,
                  "width": 20,
                  "height": 20
                   },
                "isRequired": true
            },
            {
                "id": "string1",
                "name": "string1",
                "fieldType": "RadioButton",
                "groupName": "Group1",
                "pageNumber": 1,
                "bounds": {
                  "x": 100,
                  "y": 100,
                  "width": 20,
                  "height": 20
                   },
                "isRequired": true
            }
        ],
        "locale": "EN"
     }' \
     -F 'Files={your file}' \
     -F 'Title={title}' \
```
C#

```csharp
var apiClient = new ApiClient("https://api.boldsign.com", "{your API key}");
var documentClient = new DocumentClient(apiClient);

var documentFilePath = new DocumentFilePath
{
   ContentType = "application/pdf",
   FilePath = "{Your file path}", 
};

var filesToUpload = new List<IDocumentFile>
{
    documentFilePath,
};

var radioButton1 = new RadioButtonField(
    id: "Radio1",
    isRequired: true,
    groupName: "Group1",
    pageNumber: 1,
    bounds: new Rectangle(x: 50, y: 50, width: 20, height: 20));

var radioButton2 = new RadioButtonField(
    id: "Radio2",
    isRequired: true,
    groupName: "Group1",
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 20, height: 20));

var formFieldCollections = new List<FormField>()
{
    radioButton1,
    radioButton2
};

var signer = new DocumentSigner(
  signerName: "Signer Name 1",
  signerType: SignerType.Signer,
  signerEmail: "signer1@email.com",
  formFields: formFieldCollections,
  locale: Locales.EN);

var documentSigners = new List<DocumentSigner>()
{
    signer
};

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "Agreement",
    Signers = documentSigners,
    Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);
```

Python

```python

import requests
import json

url = "https://api.boldsign.com/v1/document/send"

signer_data = {
    "name": "Hanky",
    "emailAddress": "hankyWhites@cubeflakes.com",
    "signerType": "Signer",
    "formFields": [
        {
          "id": "string",
          "name": "string",
          "fieldType": "RadioButton",
          "groupName": "Group1",
          "pageNumber": 1,
          "bounds": {
            "x": 50,
            "y": 50,
            "width": 20,
            "height": 20
              },
          "isRequired": True
        },
        {
          "id": "string1",
          "name": "string1",
          "fieldType": "RadioButton",
          "groupName": "Group1",
          "pageNumber": 1,
          "bounds": {
            "x": 100,
            "y": 100,
            "width": 20,
            "height": 20
              },
          "isRequired": True
        }
    ],
    "locale": "EN"
}

payload = {
    'Message': '',
    'Signers': json.dumps(signer_data),
    'Title': '{title}'
}

files = [
    ('Files', (
        '{file name}',
        open('{Your file path}', 'rb'),
        'application/pdf'
    ))
]

headers = {
    'accept': 'application/json',
    'X-API-KEY': '{Your API key}'
}

response = requests.request("POST", url, headers=headers, data=payload, files=files)

print(response.text)
```

NodeJS

```js
const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
let data = new FormData();
data.append('Message', '');
data.append('Signers', '\n     {\n        "name": "Hanky",\n        "emailAddress": "hankyWhites@cubeflakes.com",\n        "signerType": "Signer",\n        "formFields": [\n           {\n                "id": "string",\n                "name": "string",\n                "fieldType": "RadioButton",\n                "groupName": "Group1",\n                "pageNumber": 1,\n                "bounds": {\n                  "x": 50,\n                  "y": 50,\n                  "width": 20,\n                  "height": 20\n                   },\n                "isRequired": true\n            },\n            {\n                "id": "string1",\n                "name": "string1",\n                "fieldType": "RadioButton",\n                "groupName": "Group1",\n                "pageNumber": 1,\n                "bounds": {\n                  "x": 100,\n                  "y": 100,\n                  "width": 20,\n                  "height": 20\n                   },\n                "isRequired": true\n            }\n        ],\n        "locale": "EN"\n     }');
data.append('Files', fs.createReadStream('{Your file path}'));
data.append('Title', '{title}');

let config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://api.boldsign.com/v1/document/send',
  headers: { 
    'accept': 'application/json', 
    'X-API-KEY': '{Your API key}', 
    ...data.getHeaders()
  },
  data : data
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});
```

{% /codetab %}

In the above examples, make sure to replace `fieldType` with `RadioButton` and specify a `groupName` to group related radio buttons. Execute the provided code, making sure to provide the necessary fields such as `Files,` `Title,` and `Signers.` By doing so, the document will be sent to the signers with the radio buttons, allowing them to make a selection when signing.

## Send a document with radio button form field using a definition tag
For the information about the definition tags, please refer to the documentation: {% customlink href="/text-tags/advanced-usage/" text="Definition tags" /%}

### Code snippet using a definition tag

{% codetab id="codetab2" %}

cURL

```shell 
curl -X POST 'https://api.boldsign.com/v1/document/send' \
      url -X POST 'https://api.boldsign.com/v1/document/send' \
      -H 'X-API-KEY: {your-api-key}' \
      -F 'Title=Sent from API Curl' \
      -F 'Message=This is document message sent from API Curl' \
      -F 'EnableSigningOrder=false' \
      -F 'Signers[0][Name]=Signer Name 1' \
      -F 'Signers[0][EmailAddress]=luthercooper@cubeflakes.com' \
      -F 'Signers[0][SignerOrder]=1' \
      -F 'UseTextTags=true' \
      -F 'TextTagDefinitions[0][DefinitionId]=tag1' \
      -F 'TextTagDefinitions[0][Type]=RadioButton' \
      -F 'TextTagDefinitions[0][SignerIndex]=1' \
      -F 'TextTagDefinitions[0][IsRequired]=True' \
      -F 'TextTagDefinitions[0][RadioGroupName]=string' \
      -F 'TextTagDefinitions[0][Size][Width]=20' \
      -F 'TextTagDefinitions[0][Size][Height]=20' \
      -F 'TextTagDefinitions[0][FieldId]=axq12367' \
      -F 'TextTagDefinitions[1][DefinitionId]=tag2' \
      -F 'TextTagDefinitions[1][Type]=RadioButton' \
      -F 'TextTagDefinitions[1][SignerIndex]=1' \
      -F 'TextTagDefinitions[1][IsRequired]=True' \
      -F 'TextTagDefinitions[1][RadioGroupName]=string' \
      -F 'TextTagDefinitions[1][Size][Width]=20' \
      -F 'TextTagDefinitions[1][Size][Height]=20' \
      -F 'TextTagDefinitions[1][FieldId]=eq1267' \
      -F 'Files=@{your file};type=application/pdf' \
```

C#

```csharp
ApiClient apiClient = new ApiClient("https://api.boldsign.com", "{Your API Key}");
DocumentClient documentClient = new DocumentClient(apiClient);

// Directly provide file path of the document.
var documentFilePath = new DocumentFilePath
{
    ContentType = "application/pdf",
    FilePath = "{your file}"

};

// Creating collection with all loaded documents.
var filesToUpload = new List<IDocumentFile>
{
    documentFilePath,
};

var signer = new DocumentSigner(
  signerName: "Signer Name 1",
  signerType: SignerType.Signer,
  signerEmail: "signer1@email.com",
  locale: Locales.EN);

// Adding the signer to the collection.
var documentSigners = new List<DocumentSigner>
{
    signer
};

TextTagDefinition textTagDefinition = new TextTagDefinition(
    definitionId: "tag1",
    type: FieldType.RadioButton,
    size: new Size(
        width: 20,
        height: 20),
    signerIndex: 1,
    isRequired: true,
    radioGroupName: "Group1"
);

TextTagDefinition textTagDefinition1 = new TextTagDefinition(
    definitionId: "tag2",
    type: FieldType.RadioButton,
    size: new Size(
        width: 20,
        height: 20),
    signerIndex: 1,
    isRequired: true,
    radioGroupName: "Group1"
);

var textTagDefinitions = new List<TextTagDefinition>
{
    textTagDefinition,
    textTagDefinition1
};


// Create send for sign request object.
var sendForign = new SendForSign
{
    Title = "Sent from BoldSign API SDK",
    Message = "This is document message sent from API SDK",
    EnableSigningOrder = false,
    Files = filesToUpload,
    Signers = new List<DocumentSigner>
    {
        signer
    },

// Enabling this property will convert text tags in the document to UI form fields.
    UseTextTags = true,
    TextTagDefinitions = textTagDefinitions,
};

// Send the document for signing.
var createdDocumentResult = await documentClient.SendDocumentAsync(sendForign).ConfigureAwait(false);
```

Python

```python
import requests

url = "https://api.boldsign.com/v1/document/send"

payload={'Title': 'Sent from API Curl',
'Message': 'This is document message sent from API Curl',
'EnableSigningOrder': 'false',
'Signers[0][Name]': 'Signer Name 1',
'Signers[0][EmailAddress]': 'luthercooper@cubeflakes.com',
'Signers[0][SignerOrder]': '1',
'Signers[0][SignerType]': 'Signer',
'UseTextTags': 'true',
'TextTagDefinitions[0][DefinitionId]': 'tag1',
'TextTagDefinitions[0][Type]': 'RadioButton',
'TextTagDefinitions[0][SignerIndex]': '1',
'TextTagDefinitions[0][IsRequired]': 'True',
'TextTagDefinitions[0][RadioGroupName]': 'string',
'TextTagDefinitions[0][Size][Width]': '20',
'TextTagDefinitions[0][Size][Height]': '20',
'TextTagDefinitions[0][FieldId]': 'axq12367',
'TextTagDefinitions[1][DefinitionId]': 'tag2',
'TextTagDefinitions[1][Type]': 'RadioButton',
'TextTagDefinitions[1][SignerIndex]': '1',
'TextTagDefinitions[1][IsRequired]': 'True',
'TextTagDefinitions[1][RadioGroupName]': 'string',
'TextTagDefinitions[1][Size][Width]': '20',
'TextTagDefinitions[1][Size][Height]': '20',
'TextTagDefinitions[1][FieldId]': 'eq1267'}
files=[
  ('Files',('file',open('{your file}','rb'),'application/pdf'))
]
headers = {
  'X-API-KEY': '{your API key}'
}

response = requests.request("POST", url, headers=headers, data=payload, files=files)

print(response.text)
```

NodeJS

```js
const axios = require('axios'); 
const FormData = require('form-data'); 
const fs = require('fs'); 
const form = new FormData(); 
form.append('Title', 'Sent from API Curl'); 
form.append('Message', 'This is document message sent from API Curl'); 
form.append('EnableSigningOrder', 'false'); 
form.append('Signers[0][Name]', 'Signer Name 1'); 
form.append('Signers[0][EmailAddress]', 'luthercooper@cubeflakes.com'); 
form.append('Signers[0][SignerOrder]', '1'); 
form.append('Signers[0][SignerType]', 'Signer'); 
form.append('UseTextTags', 'true'); 
form.append('TextTagDefinitions[0][DefinitionId]','tag1');
form.append('TextTagDefinitions[0][Type]','RadioButton');
form.append('TextTagDefinitions[0][SignerIndex]','1');
form.append('TextTagDefinitions[0][IsRequired]','true');
form.append('TextTagDefinitions[0][Size][Width]','20');
form.append('TextTagDefinitions[0][Size][Height]','20');
form.append('TextTagDefinitions[0][RadioGroupName]', 'string')
form.append('TextTagDefinitions[1][FieldId]','axq12367');
form.append('TextTagDefinitions[1][DefinitionId]','tag2');
form.append('TextTagDefinitions[1][Type]','RadioButton');
form.append('TextTagDefinitions[1][SignerIndex]','1');
form.append('TextTagDefinitions[1][IsRequired]','true');
form.append('TextTagDefinitions[1][Size][Width]','20');
form.append('TextTagDefinitions[1][Size][Height]','20');
form.append('TextTagDefinitions[1][RadioGroupName]', 'string')
form.append('TextTagDefinitions[1][FieldId]','eq1267');
form.append('Files', fs.createReadStream('{your file}')); 
const response = await axios.post( 

    ' https://api.boldsign.com/v1/document/send', 

    form, 
    { 
        headers: { 
            accept: 'application/json',
            'X-API-KEY': '{Your API key}',
            ...form.getHeaders()
        } 
    } 
); 
```
{% /codetab %}

Replace the placeholders (`{your API key}`, `{your file},` etc.) with your actual data. Specify the `Type` as `Radiobutton` and specify a `GroupName` to group related radio buttons. Specify `DefinitionId` with the id present in the document.

After execution, a document will be created and sent to the signer's email with radio buttons added in the tag present in the document.

For a visual reference, please take a look at the radio buttons located in the document, as shown in the following image.

![Step 1](/static/images/guides/add-radio-button-field/step1.webp)