# Options panel

*Category:* Templates
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/templates/options-panel
*Captured:* 2026-04-27T14:59:22.829Z

## Options panel

### Example: Add transport order

Add transport order
You have two options for uploading a transport order to the system.

Where is your transport order stored?
From onboard unit
Upload the .xml order file from your vehicle.

Manual entry
Create a new transport order in the interface.

Need help uploading your order? Cancel upload

#### React (tsx)

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

import Button from '@rio-cloud/rio-uikit/Button';
import useHover from '@rio-cloud/rio-uikit/useHover';

export default () => (
    <div className='max-width-600 margin-auto'>
        <div className='display-flex flex-column gap-15 padding-25'>
            <div>
                <h3 className='text-size-h3 text-medium text-color-darkest margin-top-0'>Add transport order</h3>
                <p className='text-color-darker'>You have two options for uploading a transport order to the system.</p>
            </div>

            <h4 className='text-medium text-color-darkest margin-bottom-0'>Where is your transport order stored?</h4>

            <OptionItem
                icon='rioglyph-server-stack'
                title='From onboard unit'
                description='Upload the .xml order file from your vehicle.'
            />

            <OptionItem
                icon='rioglyph-pencil-square'
                title='Manual entry'
                description='Create a new transport order in the interface.'
            />

            <div className='display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20'>
                <a href='#'>Need help uploading your order?</a>
                <Button bsStyle='muted-filled'>Cancel upload</Button>
            </div>
        </div>
    </div>
);

type OptionItemProps = {
    icon: string;
    title: string;
    description: string;
};

const OptionItem = ({ icon, title, description }: OptionItemProps) => {
    const ref = useRef<HTMLInputElement>(null);
    const isHover = useHover(ref);

    return (
        <div
            ref={ref}
            className='rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer'
        >
            <div className='display-flex align-items-center gap-20'>
                <span className={`rioglyph ${icon} text-color-darkest text-size-h2`} />
                <div>
                    <div className='text-size-18 text-bold text-color-darkest line-height-125rel'>{title}</div>
                    <div className='text-color-darker'>{description}</div>
                </div>
            </div>
            <span
                className={`rioglyph rioglyph-chevron-right ${isHover ? 'text-color-highlight' : 'text-color-light'} text-size-20`}
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-600 margin-auto">
    <div class="display-flex flex-column gap-15 padding-25">
        <div>
            <h3 class="text-size-h3 text-medium text-color-darkest margin-top-0">Add transport order</h3>
            <p class="text-color-darker">You have two options for uploading a transport order to the system.</p>
        </div>
        <h4 class="text-medium text-color-darkest margin-bottom-0">Where is your transport order stored?</h4>
        <div class="rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer">
            <div class="display-flex align-items-center gap-20">
                <span class="rioglyph rioglyph-server-stack text-color-darkest text-size-h2">
                </span>
                <div>
                    <div class="text-size-18 text-bold text-color-darkest line-height-125rel">From onboard unit</div>
                    <div class="text-color-darker">Upload the .xml order file from your vehicle.</div>
                </div>
            </div>
            <span class="rioglyph rioglyph-chevron-right text-color-light text-size-20">
            </span>
        </div>
        <div class="rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer">
            <div class="display-flex align-items-center gap-20">
                <span class="rioglyph rioglyph-pencil-square text-color-darkest text-size-h2">
                </span>
                <div>
                    <div class="text-size-18 text-bold text-color-darkest line-height-125rel">Manual entry</div>
                    <div class="text-color-darker">Create a new transport order in the interface.</div>
                </div>
            </div>
            <span class="rioglyph rioglyph-chevron-right text-color-light text-size-20">
            </span>
        </div>
        <div class="display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20">
            <a href="#">Need help uploading your order?</a>
            <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Cancel upload</button>
        </div>
    </div>
</div>
```