# Checkbox

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/checkbox
*Captured:* 2026-04-27T14:57:17.951Z

## Checkbox

### Example: Example 1

Select multiple Some custom text
This one is initially checked
Indeterminate state
Disabled checkboxes Disabled checkbox
Disabled checked checkbox
Various props Checkbox with provided label
Checkbox with error state
Required Checkbox * Required submit test

Some text containing a link to Terms and Condition which need to be read.

Option 1 Option 2 Option 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Large checkbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
Checkbox inside grid layout

#### React (tsx)

```tsx
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Divider from '@rio-cloud/rio-uikit/Divider';

import { dummyTextShort } from '../../../utils/data';

export default () => (
    <div className='row'>
        <fieldset className='col-sm-4'>
            <legend className='margin-bottom-5'>Select multiple</legend>
            <p>
                <Checkbox>Some custom text</Checkbox>
            </p>
            <p>
                <Checkbox defaultChecked>This one is initially checked</Checkbox>
            </p>
            <p>
                <Checkbox indeterminate>Indeterminate state</Checkbox>
            </p>
        </fieldset>
        <fieldset className='col-sm-4'>
            <legend className='margin-bottom-5'>Disabled checkboxes</legend>
            <p>
                <Checkbox disabled>Disabled checkbox</Checkbox>
            </p>
            <p>
                <Checkbox disabled defaultChecked>
                    Disabled checked checkbox
                </Checkbox>
            </p>
        </fieldset>
        <fieldset className='col-sm-4'>
            <legend className='margin-bottom-5'>Various props</legend>
            <p>
                <Checkbox label='Checkbox with provided label' />
            </p>
            <p>
                <Checkbox error label='Checkbox with error state' />
            </p>
            <form>
                <p>
                    <Checkbox required label='Required Checkbox *' />
                </p>
                <button className='btn btn-primary' type='submit'>
                    Required submit test
                </button>
            </form>
        </fieldset>
        <div className='col-12'>
            <Divider />
            <p>
                <Checkbox>
                    <span>
                        Some text containing a link to{' '}
                        <a href='https://rio.cloud' className='link' target='_blank' rel='noopener'>
                            Terms and Condition
                        </a>{' '}
                        which need to be read.
                    </span>
                </Checkbox>
            </p>
            <Divider />
            <p>
                <Checkbox inline>Option 1</Checkbox>
                <Checkbox inline>Option 2</Checkbox>
                <Checkbox inline>Option 3</Checkbox>
            </p>
            <Divider />
            <div className='display-flex content-space-between gap-20'>
                <Checkbox>{dummyTextShort}</Checkbox>

                <Checkbox right>{dummyTextShort}</Checkbox>
            </div>
            <Divider />
            <p>
                <Checkbox size='large'>Large checkbox</Checkbox>
            </p>
            <Divider />
            <p>
                <Checkbox />
            </p>
            <Divider />
        </div>
        <div className='col-12'>
            <div className='display-grid gap-20 align-items-baseline grid-cols-9'>
                <div className='grid-colspan-3'>{dummyTextShort}</div>
                <div className='grid-colspan-4'>
                    <Checkbox label='Checkbox inside grid layout' />
                </div>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="row">
    <fieldset class="col-sm-4">
        <legend class="margin-bottom-5">Select multiple</legend>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>Some custom text</span>
                </span>
            </label>
        </p>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>This one is initially checked</span>
                </span>
            </label>
        </p>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="indeterminate">
                <span class="checkbox-text">
                    <span>Indeterminate state</span>
                </span>
            </label>
        </p>
    </fieldset>
    <fieldset class="col-sm-4">
        <legend class="margin-bottom-5">Disabled checkboxes</legend>
        <p>
            <label class="checkbox disabled" tabindex="0">
                <input type="checkbox" disabled="" class="">
                <span class="checkbox-text">
                    <span>Disabled checkbox</span>
                </span>
            </label>
        </p>
        <p>
            <label class="checkbox disabled" tabindex="0">
                <input type="checkbox" disabled="" class="" checked="">
                <span class="checkbox-text">
                    <span>Disabled checked checkbox</span>
                </span>
            </label>
        </p>
    </fieldset>
    <fieldset class="col-sm-4">
        <legend class="margin-bottom-5">Various props</legend>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>Checkbox with provided label</span>
                </span>
            </label>
        </p>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="error">
                <span class="checkbox-text">
                    <span>Checkbox with error state</span>
                </span>
            </label>
        </p>
        <form>
            <p>
                <label class="checkbox" tabindex="0">
                    <input type="checkbox" required="" class="">
                    <span class="checkbox-text">
                        <span>Required Checkbox *</span>
                    </span>
                </label>
            </p>
            <button class="btn btn-primary" type="submit">Required submit test</button>
        </form>
    </fieldset>
    <div class="col-12">
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>
                        <span>Some text containing a link to <a href="https://rio.cloud" class="link" target="_blank" rel="noopener">Terms and Condition</a> which need to be read.</span>
                    </span>
                </span>
            </label>
        </p>
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
        <p>
            <label class="checkbox checkbox-inline" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>Option 1</span>
                </span>
            </label>
            <label class="checkbox checkbox-inline" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>Option 2</span>
                </span>
            </label>
            <label class="checkbox checkbox-inline" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>Option 3</span>
                </span>
            </label>
        </p>
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
        <div class="display-flex content-space-between gap-20">
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</span>
                </span>
            </label>
            <label class="checkbox checkbox-right" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</span>
                </span>
            </label>
        </div>
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
        <p>
            <label class="checkbox checkbox-large" tabindex="0">
                <input type="checkbox" class="large">
                <span class="checkbox-text">
                    <span>Large checkbox</span>
                </span>
            </label>
        </p>
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
        <p>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="">
                <span class="checkbox-text">
                </span>
            </label>
        </p>
        <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
            <div class="divider-line bg-light" style="width: 100%; height: 1px;">
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="display-grid gap-20 align-items-baseline grid-cols-9">
            <div class="grid-colspan-3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
            <div class="grid-colspan-4">
                <label class="checkbox" tabindex="0">
                    <input type="checkbox" class="">
                    <span class="checkbox-text">
                        <span>Checkbox inside grid layout</span>
                    </span>
                </label>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
<div className='checkbox-text-wrapper display-flex justify-content-between'>
    <div className='margin-right-15'>
        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
        <div className='text-color-dark'>This option is a first option</div>
    </div>
    <div className='checkbox-text' />
</div>
```

## Controlled example

### Example: Example 2

Option 1 Option 2 Option 3

#### React (tsx)

```tsx
import { useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';

export default () => {
    const [selectedOptions, setSelectedOptions] = useState([1]);

    const handleSelect = (selected: number) => {
        setSelectedOptions(prevSelectedOptions =>
            prevSelectedOptions.includes(selected)
                ? prevSelectedOptions.filter(value => value !== selected)
                : [...prevSelectedOptions, selected]
        );
    };

    return (
        <div>
            <Checkbox onChange={() => handleSelect(1)} checked={selectedOptions.includes(1)} inline>
                Option 1
            </Checkbox>
            <Checkbox onChange={() => handleSelect(2)} checked={selectedOptions.includes(2)} inline>
                Option 2
            </Checkbox>
            <Checkbox onChange={() => handleSelect(3)} checked={selectedOptions.includes(3)} inline>
                Option 3
            </Checkbox>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <label class="checkbox checkbox-inline" tabindex="0">
        <input type="checkbox" class="" checked="">
        <span class="checkbox-text">
            <span>Option 1</span>
        </span>
    </label>
    <label class="checkbox checkbox-inline" tabindex="0">
        <input type="checkbox" class="">
        <span class="checkbox-text">
            <span>Option 2</span>
        </span>
    </label>
    <label class="checkbox checkbox-inline" tabindex="0">
        <input type="checkbox" class="">
        <span class="checkbox-text">
            <span>Option 3</span>
        </span>
    </label>
</div>
```

#### Props (json)

```json
<div className='checkbox-text-wrapper display-flex justify-content-between'>
    <div className='margin-right-15'>
        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
        <div className='text-color-dark'>This option is a first option</div>
    </div>
    <div className='checkbox-text' />
</div>
```

## Custom card example

> Note: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.

### Example: This option is a first option

Custom checkbox list Option 1
This option is a first option

Option 2
This option is a second option

Option 3
This option is a third option

Custom checkbox list as pick list without tick Banana
Peach
Pear
Strawberry

#### React (tsx)

```tsx
import { useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';

const getCheckboxClasses = (isSelected: boolean) =>
    `padding-15 user-select-none border rounded ${isSelected ? 'border-color-highlight' : ''}`;

const getPicklistCheckboxClasses = (isSelected: boolean) =>
    `padding-x-15 padding-y-5 user-select-none rounded shadow-accent ${isSelected ? 'border-color-highlight bg-highlight text-color-white' : 'hover-bg-highlight-decent text-color-darker'}`;

export default () => {
    const [selectedOptions, setSelectedOptions] = useState([1]);

    const handleSelect = (selected: number) => {
        setSelectedOptions(prevSelectedOptions =>
            prevSelectedOptions.includes(selected)
                ? prevSelectedOptions.filter(value => value !== selected)
                : [...prevSelectedOptions, selected]
        );
    };

    return (
        <form>
            <fieldset className='display-flex gap-15 margin-bottom-50'>
                <legend className='margin-bottom-20'>Custom checkbox list</legend>
                <Checkbox
                    onChange={() => handleSelect(1)}
                    checked={selectedOptions.includes(1)}
                    custom
                    className={getCheckboxClasses(selectedOptions.includes(1))}
                >
                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
                        <div className='margin-right-15'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
                            <div className='text-color-dark'>This option is a first option</div>
                        </div>
                        <div className='checkbox-text' />
                    </div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(2)}
                    checked={selectedOptions.includes(2)}
                    custom
                    className={getCheckboxClasses(selectedOptions.includes(2))}
                >
                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
                        <div className='margin-right-15'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 2</div>
                            <div className='text-color-dark'>This option is a second option</div>
                        </div>
                        <div className='checkbox-text' />
                    </div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(3)}
                    checked={selectedOptions.includes(3)}
                    custom
                    disabled
                    className={getCheckboxClasses(selectedOptions.includes(3))}
                >
                    <div className='checkbox-text-wrapper display-flex justify-content-between'>
                        <div className='margin-right-15'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 3</div>
                            <div className='text-color-dark'>This option is a third option</div>
                        </div>
                        <div className='checkbox-text' />
                    </div>
                </Checkbox>
            </fieldset>

            <fieldset className='display-flex gap-5'>
                <legend className='margin-bottom-20'>Custom checkbox list as pick list without tick</legend>
                <Checkbox
                    onChange={() => handleSelect(4)}
                    checked={selectedOptions.includes(4)}
                    custom
                    className={getPicklistCheckboxClasses(selectedOptions.includes(4))}
                >
                    <div className='checkbox-text-wrapper'>Banana</div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(5)}
                    checked={selectedOptions.includes(5)}
                    custom
                    className={getPicklistCheckboxClasses(selectedOptions.includes(5))}
                >
                    <div className='checkbox-text-wrapper'>Peach</div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(6)}
                    checked={selectedOptions.includes(6)}
                    custom
                    className={getPicklistCheckboxClasses(selectedOptions.includes(6))}
                >
                    <div className='checkbox-text-wrapper'>Pear</div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(7)}
                    checked={selectedOptions.includes(7)}
                    custom
                    className={getPicklistCheckboxClasses(selectedOptions.includes(7))}
                >
                    <div className='checkbox-text-wrapper'>Strawberry</div>
                </Checkbox>
            </fieldset>
        </form>
    );
};
```

#### HTML (html)

```html
<form>
    <fieldset class="display-flex gap-15 margin-bottom-50">
        <legend class="margin-bottom-20">Custom checkbox list</legend>
        <label class="checkbox padding-15 user-select-none border rounded border-color-highlight" tabindex="0">
            <input type="checkbox" class="padding-15 user-select-none border rounded border-color-highlight" checked="">
            <div class="checkbox-text-wrapper display-flex justify-content-between">
                <div class="margin-right-15">
                    <div class="text-medium text-size-16 text-color-darker">Option 1</div>
                    <div class="text-color-dark">This option is a first option</div>
                </div>
                <div class="checkbox-text">
                </div>
            </div>
        </label>
        <label class="checkbox padding-15 user-select-none border rounded " tabindex="0">
            <input type="checkbox" class="padding-15 user-select-none border rounded ">
            <div class="checkbox-text-wrapper display-flex justify-content-between">
                <div class="margin-right-15">
                    <div class="text-medium text-size-16 text-color-darker">Option 2</div>
                    <div class="text-color-dark">This option is a second option</div>
                </div>
                <div class="checkbox-text">
                </div>
            </div>
        </label>
        <label class="checkbox disabled padding-15 user-select-none border rounded " tabindex="0">
            <input type="checkbox" disabled="" class="padding-15 user-select-none border rounded ">
            <div class="checkbox-text-wrapper display-flex justify-content-between">
                <div class="margin-right-15">
                    <div class="text-medium text-size-16 text-color-darker">Option 3</div>
                    <div class="text-color-dark">This option is a third option</div>
                </div>
                <div class="checkbox-text">
                </div>
            </div>
        </label>
    </fieldset>
    <fieldset class="display-flex gap-5">
        <legend class="margin-bottom-20">Custom checkbox list as pick list without tick</legend>
        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
            <div class="checkbox-text-wrapper">Banana</div>
        </label>
        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
            <div class="checkbox-text-wrapper">Peach</div>
        </label>
        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
            <div class="checkbox-text-wrapper">Pear</div>
        </label>
        <label class="checkbox padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker" tabindex="0">
            <input type="checkbox" class="padding-x-15 padding-y-5 user-select-none rounded shadow-accent hover-bg-highlight-decent text-color-darker">
            <div class="checkbox-text-wrapper">Strawberry</div>
        </label>
    </fieldset>
</form>
```

#### Props (json)

```json
<div className='checkbox-text-wrapper display-flex justify-content-between'>
    <div className='margin-right-15'>
        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
        <div className='text-color-dark'>This option is a first option</div>
    </div>
    <div className='checkbox-text' />
</div>
```

## Custom list example

### Example: This option is a first option

Custom checkbox list
Option 1
This option is a first option

Option 2
This option is a second option

Option 3
This option is a third option

#### React (tsx)

```tsx
import { useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';

export default () => {
    const [selectedOptions, setSelectedOptions] = useState([1]);

    const handleSelect = (selected: number) => {
        setSelectedOptions(prevSelectedOptions =>
            prevSelectedOptions.includes(selected)
                ? prevSelectedOptions.filter(value => value !== selected)
                : [...prevSelectedOptions, selected]
        );
    };

    return (
        <fieldset className='display-flex flex-column width-300'>
            <legend>Custom checkbox list</legend>
            <div className='border rounded'>
                <Checkbox
                    onChange={() => handleSelect(1)}
                    checked={selectedOptions.includes(1)}
                    custom
                    className='padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top'
                >
                    <div className='checkbox-text-wrapper display-flex gap-10'>
                        <div className='checkbox-text' />
                        <div className='flex-1-1'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
                            <div className='text-color-dark'>This option is a first option</div>
                        </div>
                    </div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(2)}
                    checked={selectedOptions.includes(2)}
                    custom
                    className='padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent'
                >
                    <div className='checkbox-text-wrapper display-flex gap-10'>
                        <div className='checkbox-text' />
                        <div className='flex-1-1'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 2</div>
                            <div className='text-color-dark'>This option is a second option</div>
                        </div>
                    </div>
                </Checkbox>
                <Checkbox
                    onChange={() => handleSelect(3)}
                    checked={selectedOptions.includes(3)}
                    custom
                    disabled
                    className='padding-15 user-select-none hover-bg-highlight-decent rounded-bottom'
                >
                    <div className='checkbox-text-wrapper display-flex gap-10'>
                        <div className='checkbox-text' />
                        <div className='flex-1-1'>
                            <div className='text-medium text-size-16 text-color-darker'>Option 3</div>
                            <div className='text-color-dark'>This option is a third option</div>
                        </div>
                    </div>
                </Checkbox>
            </div>
        </fieldset>
    );
};
```

#### HTML (html)

```html
<fieldset class="display-flex flex-column width-300">
    <legend>Custom checkbox list</legend>
    <div class="border rounded">
        <label class="checkbox padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top" tabindex="0">
            <input type="checkbox" class="padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent rounded-top" checked="">
            <div class="checkbox-text-wrapper display-flex gap-10">
                <div class="checkbox-text">
                </div>
                <div class="flex-1-1">
                    <div class="text-medium text-size-16 text-color-darker">Option 1</div>
                    <div class="text-color-dark">This option is a first option</div>
                </div>
            </div>
        </label>
        <label class="checkbox padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent" tabindex="0">
            <input type="checkbox" class="padding-15 border border-bottom-only user-select-none hover-bg-highlight-decent">
            <div class="checkbox-text-wrapper display-flex gap-10">
                <div class="checkbox-text">
                </div>
                <div class="flex-1-1">
                    <div class="text-medium text-size-16 text-color-darker">Option 2</div>
                    <div class="text-color-dark">This option is a second option</div>
                </div>
            </div>
        </label>
        <label class="checkbox disabled padding-15 user-select-none hover-bg-highlight-decent rounded-bottom" tabindex="0">
            <input type="checkbox" disabled="" class="padding-15 user-select-none hover-bg-highlight-decent rounded-bottom">
            <div class="checkbox-text-wrapper display-flex gap-10">
                <div class="checkbox-text">
                </div>
                <div class="flex-1-1">
                    <div class="text-medium text-size-16 text-color-darker">Option 3</div>
                    <div class="text-color-dark">This option is a third option</div>
                </div>
            </div>
        </label>
    </div>
</fieldset>
```

#### Props (json)

```json
<div className='checkbox-text-wrapper display-flex justify-content-between'>
    <div className='margin-right-15'>
        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
        <div className='text-color-dark'>This option is a first option</div>
    </div>
    <div className='checkbox-text' />
</div>
```

## Checkbox with custom icon

### Example: Example 5

Option 1 Option 2 Option 3

Option 1 Option 2 Option 3

#### React (tsx)

```tsx
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';

export default () => (
    <div>
        <div>
            <Checkbox inline icon='rioglyph-truck' iconLabelPosition={Checkbox.ICON_LABEL_HORIZONTAL}>
                Option 1
            </Checkbox>
            <Checkbox inline icon='rioglyph-bus' iconLabelPosition={Checkbox.ICON_LABEL_HORIZONTAL}>
                Option 2
            </Checkbox>
            <Checkbox inline icon='rioglyph-van' iconLabelPosition='horizontal'>
                Option 3
            </Checkbox>
        </div>
        <hr />
        <div>
            <Checkbox inline className='width-50' icon='rioglyph-truck' iconSize={75}>
                Option 1
            </Checkbox>
            <Checkbox inline icon='rioglyph-bus' iconSize={75}>
                Option 2
            </Checkbox>
            <Checkbox inline icon='rioglyph-van' iconSize={75}>
                Option 3
            </Checkbox>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div>
        <label class="checkbox checkbox-inline" tabindex="0">
            <input type="checkbox" class="">
            <span class="checkbox-icon label-horizontal">
                <span class="rioglyph rioglyph-truck" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="checkbox-label">Option 1</span>
            </span>
        </label>
        <label class="checkbox checkbox-inline" tabindex="0">
            <input type="checkbox" class="">
            <span class="checkbox-icon label-horizontal">
                <span class="rioglyph rioglyph-bus" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="checkbox-label">Option 2</span>
            </span>
        </label>
        <label class="checkbox checkbox-inline" tabindex="0">
            <input type="checkbox" class="">
            <span class="checkbox-icon label-horizontal">
                <span class="rioglyph rioglyph-van" style="width: 16px; height: 16px; font-size: 16px; line-height: 16px;">
                </span>
                <span class="checkbox-label">Option 3</span>
            </span>
        </label>
    </div>
    <hr>
    <div>
        <label class="checkbox checkbox-inline width-50" tabindex="0">
            <input type="checkbox" class="width-50">
            <span class="checkbox-icon label-vertical">
                <span class="rioglyph rioglyph-truck" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="checkbox-label">Option 1</span>
            </span>
        </label>
        <label class="checkbox checkbox-inline" tabindex="0">
            <input type="checkbox" class="">
            <span class="checkbox-icon label-vertical">
                <span class="rioglyph rioglyph-bus" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="checkbox-label">Option 2</span>
            </span>
        </label>
        <label class="checkbox checkbox-inline" tabindex="0">
            <input type="checkbox" class="">
            <span class="checkbox-icon label-vertical">
                <span class="rioglyph rioglyph-van" style="width: 75px; height: 75px; font-size: 75px; line-height: 75px;">
                </span>
                <span class="checkbox-label">Option 3</span>
            </span>
        </label>
    </div>
</div>
```

#### Props (json)

```json
<div className='checkbox-text-wrapper display-flex justify-content-between'>
    <div className='margin-right-15'>
        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
        <div className='text-color-dark'>This option is a first option</div>
    </div>
    <div className='checkbox-text' />
</div>
```