# Form summary

*Category:* Templates
*Section:* Forms
*Source:* https://uikit.developers.rio.cloud/#/templates/form-summary
*Captured:* 2026-04-27T14:59:25.235Z

## Form summary

### Example: Request summary

Request summary
Generated client request data

Contact person Drew Goldner
Requested role International Directives Representative
Contact email Bert.Labadie-Wilkinson33@hotmail.com
Annual budget €132,320.00
Project description Cognomen conor defetiscor ad dedico.
Absens aggredior totus contabesco excepturi accendo taedium distinctio vis.
Venia aro deorsum.
Supporting files project-outline.pdf
2.4MB
Download

wireframes.pdf
3.7MB
Download

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';
import Button from '@rio-cloud/rio-uikit/Button';
import { FormattedNumber } from 'react-intl';

export default () => {
    const subjectInfo = {
        fullName: faker.person.fullName(),
        role: faker.person.jobTitle(),
        email: faker.internet.email(),
        budget: faker.number.int({ min: 50_000, max: 200_000 }),
        description: faker.lorem.lines(3),
        attachments: [
            {
                name: 'project-outline.pdf',
                sizeMB: 2.4,
            },
            {
                name: 'wireframes.pdf',
                sizeMB: 3.7,
            },
        ],
    };

    return (
        <div className='max-width-600 margin-auto'>
            <div>
                <div className='padding-x-5'>
                    <h3 className='text-base/7 font-semibold text-text-color-darker'>Request summary</h3>
                    <p className='mt-1 max-w-2xl text-sm/6 text-gray-500'>Generated client request data</p>
                </div>
                <div className='mt-6 border-t border-gray-100'>
                    <dl className='divider-y-1 divider-color-lighter divider-style-solid'>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Contact person</dt>
                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.fullName}</dd>
                        </div>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Requested role</dt>
                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.role}</dd>
                        </div>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Contact email</dt>
                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.email}</dd>
                        </div>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Annual budget</dt>
                            <dd className='grid-colspan-2 text-color-darker'>
                                <FormattedNumber value={subjectInfo.budget} style='currency' currency='EUR' />
                            </dd>
                        </div>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Project description</dt>
                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.description}</dd>
                        </div>
                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
                            <dt className='text-medium text-color-darkest'>Supporting files</dt>
                            <dd className='grid-colspan-2'>
                                <div className='list-group border rounded'>
                                    {subjectInfo.attachments.map(file => (
                                        <div
                                            key={file.name}
                                            className='list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5'
                                        >
                                            <div className='grid-colspan-4'>{file.name}</div>
                                            <div className='text-color-dark text-size-12'>
                                                <FormattedNumber
                                                    value={file.sizeMB}
                                                    style='unit'
                                                    unit='megabyte'
                                                    unitDisplay='narrow'
                                                />
                                            </div>
                                            <div className='grid-colspan-2 text-right'>
                                                <Button variant='link'>Download</Button>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-600 margin-auto">
    <div>
        <div class="padding-x-5">
            <h3 class="text-base/7 font-semibold text-text-color-darker">Request summary</h3>
            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">Generated client request data</p>
        </div>
        <div class="mt-6 border-t border-gray-100">
            <dl class="divider-y-1 divider-color-lighter divider-style-solid">
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Contact person</dt>
                    <dd class="grid-colspan-2 text-color-darker">Drew Goldner</dd>
                </div>
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Requested role</dt>
                    <dd class="grid-colspan-2 text-color-darker">International Directives Representative</dd>
                </div>
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Contact email</dt>
                    <dd class="grid-colspan-2 text-color-darker">Bert.Labadie-Wilkinson33@hotmail.com</dd>
                </div>
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Annual budget</dt>
                    <dd class="grid-colspan-2 text-color-darker">€132,320.00</dd>
                </div>
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Project description</dt>
                    <dd class="grid-colspan-2 text-color-darker">Cognomen conor defetiscor ad dedico.
                        Absens aggredior totus contabesco excepturi accendo taedium distinctio vis.
                        Venia aro deorsum.</dd>
                </div>
                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
                    <dt class="text-medium text-color-darkest">Supporting files</dt>
                    <dd class="grid-colspan-2">
                        <div class="list-group border rounded">
                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
                                <div class="grid-colspan-4">project-outline.pdf</div>
                                <div class="text-color-dark text-size-12">2.4MB</div>
                                <div class="grid-colspan-2 text-right">
                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
                                </div>
                            </div>
                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
                                <div class="grid-colspan-4">wireframes.pdf</div>
                                <div class="text-color-dark text-size-12">3.7MB</div>
                                <div class="grid-colspan-2 text-right">
                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
                                </div>
                            </div>
                        </div>
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>
```