# FormLabel

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/formLabel
*Captured:* 2026-04-27T14:57:58.946Z

A small convenience component for a form label or just a label style used without a form element.

## FormLabel

### Example: A label for another form elementSupporting text

A label for a form element
A label for a form element with additional info Supporting text
A label for a form element with additional info as icon
A label for another form element Supporting text

Lorem ipsum dolor

A label for some other elements
Button Button

#### React (tsx)

```tsx
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import Button from '@rio-cloud/rio-uikit/Button';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import Switch from '@rio-cloud/rio-uikit/Switch';
import useToggle from '@rio-cloud/rio-uikit/useToggle';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';

export default () => {
    const { isToggled, toggle } = useToggle(true);

    return (
        <div className='display-flex flex-column gap-15 max-width-500'>
            <div className='form-group'>
                <FormLabel htmlFor='sample-input'>A label for a form element</FormLabel>
                <input id='sample-input' className='form-control' placeholder='Some random input' />
            </div>

            <div className='form-group'>
                <FormLabel htmlFor='sample-input' supportingText='Supporting text'>
                    A label for a form element with additional info
                </FormLabel>
                <input id='sample-input' className='form-control' placeholder='Some random input' />
            </div>

            <div className='form-group'>
                <FormLabel
                    htmlFor='sample-input'
                    supportingText={
                        <SimpleTooltip content='Lorem ipsum dolor sit amet' placement='top' width={150}>
                            <span className='rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer' />
                        </SimpleTooltip>
                    }
                >
                    A label for a form element with additional info as icon
                </FormLabel>
                <input id='sample-input' className='form-control' placeholder='Some random input' />
            </div>

            <div className='form-group'>
                <FormLabel supportingText='Supporting text'>A label for another form element</FormLabel>
                <div className='bg-lightest rounded padding-15'>
                    <Switch onChange={() => toggle()} checked={isToggled}>
                        Lorem ipsum dolor
                    </Switch>
                </div>
            </div>

            <div className='form-group'>
                <FormLabel>A label for some other elements</FormLabel>
                <ButtonToolbar>
                    <Button>Button</Button>
                    <Button bsStyle='primary'>Button</Button>
                </ButtonToolbar>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-15 max-width-500">
    <div class="form-group">
        <label for="sample-input" class="display-inline-block">
            <span>A label for a form element</span>
        </label>
        <input id="sample-input" class="form-control" placeholder="Some random input">
    </div>
    <div class="form-group">
        <label for="sample-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
            <span>A label for a form element with additional info</span>
            <span class="text-color-gray text-italic text-size-12">Supporting text</span>
        </label>
        <input id="sample-input" class="form-control" placeholder="Some random input">
    </div>
    <div class="form-group">
        <label for="sample-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
            <span>A label for a form element with additional info as icon</span>
            <span class="text-color-gray text-size-12">
                <span class="rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer">
                </span>
            </span>
        </label>
        <input id="sample-input" class="form-control" placeholder="Some random input">
    </div>
    <div class="form-group">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-flex flex-wrap justify-content-between width-100pct margin-bottom-5">A label for another form element<span class="text-color-gray text-italic text-size-12">Supporting text</span>
        </div>
        <div class="bg-lightest rounded padding-15">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch label-position-right">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                    <div class="switch-text-wrapper user-select-none padding-top-1">Lorem ipsum dolor</div>
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">A label for some other elements</div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Button</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| supportingText | string \| React.ReactElement | — | Additional supporting text displayed next to the label. |
| className | string | — | Additional classes set to the outer element. |

### Example: A label for some large buttons

Labels for various sized elements using the form-group-sm and form-group-lg class on the parent element.
A label for a small form element Lorem ipsum
A label for a large form element Lorem ipsum
A label for some large buttons
Button Button

#### React (tsx)

```tsx
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

export default () => (
    <div className='display-flex flex-column gap-15 max-width-500'>
        <p>
            Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code> class
            on the parent element.
        </p>
        <div className='form-group form-group-sm'>
            <FormLabel htmlFor='sample-sm-input' supportingText='Lorem ipsum'>
                A label for a small form element
            </FormLabel>
            <input id='sample-sm-input' className='form-control' placeholder='Some input' />
        </div>

        <div className='form-group form-group-lg'>
            <FormLabel htmlFor='sample-lg-input' supportingText='Lorem ipsum'>
                A label for a large form element
            </FormLabel>
            <input id='sample-lg-input' className='form-control' placeholder='Some input' />
        </div>

        <div className='form-group form-group-lg'>
            <FormLabel>A label for some large buttons</FormLabel>
            <ButtonToolbar>
                <Button bsSize='lg'>Button</Button>
                <Button bsSize='lg' bsStyle='primary'>
                    Button
                </Button>
            </ButtonToolbar>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-15 max-width-500">
    <p>Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code> class on the parent element.</p>
    <div class="form-group form-group-sm">
        <label for="sample-sm-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
            <span>A label for a small form element</span>
            <span class="text-color-gray text-italic text-size-10">Lorem ipsum</span>
        </label>
        <input id="sample-sm-input" class="form-control" placeholder="Some input">
    </div>
    <div class="form-group form-group-lg">
        <label for="sample-lg-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
            <span>A label for a large form element</span>
            <span class="text-color-gray text-italic text-size-14">Lorem ipsum</span>
        </label>
        <input id="sample-lg-input" class="form-control" placeholder="Some input">
    </div>
    <div class="form-group form-group-lg">
        <div class="text-color-dark max-width-100pct text-size-14 display-inline-block margin-bottom-5">A label for some large buttons</div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-lg btn-component" tabindex="0">Button</button>
            <button type="button" class="btn btn-primary btn-lg btn-component" tabindex="0">Button</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| supportingText | string \| React.ReactElement | — | Additional supporting text displayed next to the label. |
| className | string | — | Additional classes set to the outer element. |