# Form blocks

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

## Form blocks

### Example: This name will appear on your team profile page

Settings Company display name
This name will appear on your team profile page

About the team
Write a short summary about your organization or group (max 240 characters).

Multi-tiered local attitude

Company email
Your contact email address for customer communication

Display email on team page

Office location
Primary business address used for official correspondence

Texas Texas
Illinois

Mauritania Mauritania
Grenada

Preferred currency
All pricing and payouts will be shown in this currency

EUR - Euro USD - US Dollar
EUR - Euro
GBP - British Pound

Discard Apply changes

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Divider from '@rio-cloud/rio-uikit/Divider';
import Select from '@rio-cloud/rio-uikit/Select';

export default () => (
    <div className='margin-25-md'>
        <section className='padding-25-ls max-width-800 margin-auto'>
            <fieldset>
                <legend className='text-size-h2'>Settings</legend>

                <form className='display-grid-md grid-cols-2-md row-gap-25 margin-top-25'>
                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
                        <div>
                            <div className='text-size-16 text-medium'>Company display name</div>
                            <p className='text-wrap-balance text-color-dark'>
                                This name will appear on your team profile page
                            </p>
                        </div>
                        <div className='form-group'>
                            <ClearableInput value={faker.company.name()} />
                        </div>
                    </section>

                    <div className='grid-colspan-2'>
                        <Divider dividerColor='lighter' />
                    </div>

                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
                        <div>
                            <div className='text-size-16 text-medium'>About the team</div>
                            <p className='text-wrap-balance text-color-dark'>
                                Write a short summary about your organization or group (max 240 characters).
                            </p>
                        </div>
                        <div className='form-group'>
                            <textarea className='form-control' rows={4} defaultValue={faker.company.catchPhrase()} />
                        </div>
                    </section>

                    <div className='grid-colspan-2'>
                        <Divider dividerColor='lighter' />
                    </div>

                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
                        <div>
                            <div className='text-size-16 text-medium'>Company email</div>
                            <p className='text-wrap-balance text-color-dark'>
                                Your contact email address for customer communication
                            </p>
                        </div>
                        <div className='form-group'>
                            <ClearableInput type='email' value={faker.internet.email()} />
                            <Checkbox className='margin-top-15' defaultChecked>
                                Display email on team page
                            </Checkbox>
                        </div>
                    </section>

                    <div className='grid-colspan-2'>
                        <Divider dividerColor='lighter' />
                    </div>

                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
                        <div>
                            <div className='text-size-16 text-medium'>Office location</div>
                            <p className='text-wrap-balance text-color-dark'>
                                Primary business address used for official correspondence
                            </p>
                        </div>
                        <div className='form-group display-flex flex-column gap-15'>
                            <ClearableInput value={faker.location.streetAddress()} placeholder='Street address' />
                            <ClearableInput value={faker.location.city()} placeholder='City' />
                            <div className='display-flex gap-15'>
                                <Select
                                    options={[
                                        { id: '1', label: faker.location.state(), selected: true },
                                        { id: '2', label: faker.location.state() },
                                    ]}
                                />
                                <ClearableInput value={faker.location.zipCode()} placeholder='Zip code' />
                            </div>
                            <Select
                                options={[
                                    { id: '1', label: faker.location.country(), selected: true },
                                    { id: '2', label: faker.location.country() },
                                ]}
                            />
                        </div>
                    </section>

                    <div className='grid-colspan-2'>
                        <Divider dividerColor='lighter' />
                    </div>

                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
                        <div>
                            <div className='text-size-16 text-medium'>Preferred currency</div>
                            <p className='text-wrap-balance text-color-dark'>
                                All pricing and payouts will be shown in this currency
                            </p>
                        </div>
                        <div className='form-group'>
                            <Select
                                options={[
                                    { id: '1', label: 'USD - US Dollar' },
                                    { id: '2', label: 'EUR - Euro', selected: true },
                                    { id: '3', label: 'GBP - British Pound' },
                                ]}
                            />
                        </div>
                    </section>

                    <div className='grid-colspan-2'>
                        <Divider dividerColor='lighter' />
                    </div>

                    <section className='grid-colspan-2'>
                        <ButtonToolbar alignment='right'>
                            <Button bsStyle='muted-filled'>Discard</Button>
                            <Button type='submit' bsStyle='primary'>
                                Apply changes
                            </Button>
                        </ButtonToolbar>
                    </section>
                </form>
            </fieldset>
        </section>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <section class="padding-25-ls max-width-800 margin-auto">
        <fieldset>
            <legend class="text-size-h2">Settings</legend>
            <form class="display-grid-md grid-cols-2-md row-gap-25 margin-top-25">
                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
                    <div>
                        <div class="text-size-16 text-medium">Company display name</div>
                        <p class="text-wrap-balance text-color-dark">This name will appear on your team profile page</p>
                    </div>
                    <div class="form-group">
                        <div class="ClearableInput input-group">
                            <input class="form-control withClearButton" type="text" tabindex="0" value="Lubowitz, Ondricka and Conn">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </section>
                <div class="grid-colspan-2">
                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                        </div>
                    </div>
                </div>
                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
                    <div>
                        <div class="text-size-16 text-medium">About the team</div>
                        <p class="text-wrap-balance text-color-dark">Write a short summary about your organization or group (max 240 characters).</p>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="4">Multi-tiered local attitude</textarea>
                    </div>
                </section>
                <div class="grid-colspan-2">
                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                        </div>
                    </div>
                </div>
                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
                    <div>
                        <div class="text-size-16 text-medium">Company email</div>
                        <p class="text-wrap-balance text-color-dark">Your contact email address for customer communication</p>
                    </div>
                    <div class="form-group">
                        <div class="ClearableInput input-group">
                            <input class="form-control withClearButton" type="email" tabindex="0" value="Marjory_Bogan1@gmail.com">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                        <label class="checkbox margin-top-15" tabindex="0">
                            <input type="checkbox" class="margin-top-15" checked="">
                            <span class="checkbox-text">
                                <span>Display email on team page</span>
                            </span>
                        </label>
                    </div>
                </section>
                <div class="grid-colspan-2">
                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                        </div>
                    </div>
                </div>
                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
                    <div>
                        <div class="text-size-16 text-medium">Office location</div>
                        <p class="text-wrap-balance text-color-dark">Primary business address used for official correspondence</p>
                    </div>
                    <div class="form-group display-flex flex-column gap-15">
                        <div class="ClearableInput input-group">
                            <input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="456 Lehner Extension">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                        <div class="ClearableInput input-group">
                            <input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="West Sadieborough">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                        <div class="display-flex gap-15">
                            <div class="select dropdown dropup">
                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                    <span class="selected-option-text">Texas</span>
                                    <span class="select-toggle-actions">
                                        <span class="clearButton hide pointer-events-none">
                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                            </span>
                                        </span>
                                        <span class="caret">
                                        </span>
                                    </span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
                                            <span class="selected-option-dropdown-item">Texas</span>
                                            <input type="hidden" value="1">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
                                            <span class="selected-option-dropdown-item">Illinois</span>
                                            <input type="hidden" value="2">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="ClearableInput input-group">
                                <input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="35339">
                                <span class="clearButton">
                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                    </span>
                                </span>
                            </div>
                        </div>
                        <div class="select dropdown dropup">
                            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                <span class="selected-option-text">Mauritania</span>
                                <span class="select-toggle-actions">
                                    <span class="clearButton hide pointer-events-none">
                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                        </span>
                                    </span>
                                    <span class="caret">
                                    </span>
                                </span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li class="" role="listitem">
                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
                                        <span class="selected-option-dropdown-item">Mauritania</span>
                                        <input type="hidden" value="1">
                                    </a>
                                </li>
                                <li class="" role="listitem">
                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
                                        <span class="selected-option-dropdown-item">Grenada</span>
                                        <input type="hidden" value="2">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
                <div class="grid-colspan-2">
                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                        </div>
                    </div>
                </div>
                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
                    <div>
                        <div class="text-size-16 text-medium">Preferred currency</div>
                        <p class="text-wrap-balance text-color-dark">All pricing and payouts will be shown in this currency</p>
                    </div>
                    <div class="form-group">
                        <div class="select dropdown dropup">
                            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                <span class="selected-option-text">EUR - Euro</span>
                                <span class="select-toggle-actions">
                                    <span class="clearButton hide pointer-events-none">
                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                        </span>
                                    </span>
                                    <span class="caret">
                                    </span>
                                </span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li class="" role="listitem">
                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
                                        <span class="selected-option-dropdown-item">USD - US Dollar</span>
                                        <input type="hidden" value="1">
                                    </a>
                                </li>
                                <li class="" role="listitem">
                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
                                        <span class="selected-option-dropdown-item">EUR - Euro</span>
                                        <input type="hidden" value="2">
                                    </a>
                                </li>
                                <li class="" role="listitem">
                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="3" data-item-index="2">
                                        <span class="selected-option-dropdown-item">GBP - British Pound</span>
                                        <input type="hidden" value="3">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
                <div class="grid-colspan-2">
                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
                        </div>
                    </div>
                </div>
                <section class="grid-colspan-2">
                    <div class="btn-toolbar justify-content-end">
                        <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Discard</button>
                        <button type="submit" class="btn btn-primary btn-component" tabindex="0">Apply changes</button>
                    </div>
                </section>
            </form>
        </fieldset>
    </section>
</div>
```