# LabeledElement

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/labeledElement
*Captured:* 2026-04-27T14:58:00.560Z

A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.

## LabeledElement

### Example: Label for other elements

Label for a form element
Label for other elements
Button Button

Label for a value
Some value with default gap

Label with no gap
Lorem ipsum dolor
Label for styled value Lorem ipsum dolor

#### React (tsx)

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

export default () => (
    <div className='display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25'>
        <LabeledElement label='Label for a form element' htmlFor='sample-input'>
            <input id='sample-input' className='form-control' placeholder='Some random input' />
        </LabeledElement>

        <LabeledElement label='Label for other elements'>
            <ButtonToolbar>
                <Button>Button</Button>
                <Button bsStyle='primary'>Button</Button>
            </ButtonToolbar>
        </LabeledElement>

        <LabeledElement label='Label for a value'>
            <div>Some value with default gap</div>
        </LabeledElement>

        <LabeledElement label='Label with no gap' noGap>
            Lorem ipsum dolor
        </LabeledElement>

        <LabeledElement label={<span>Label for styled value</span>} noGap>
            <span className='text-size-16 text-color-darker'>Lorem ipsum dolor</span>
        </LabeledElement>
    </div>
);
```

#### HTML (html)

```html
<div class="display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25">
    <div class="LabeledElement display-flex flex-column">
        <label for="sample-input" class="display-inline-block">
            <span>Label for a form element</span>
        </label>
        <input id="sample-input" class="form-control" placeholder="Some random input">
    </div>
    <div class="LabeledElement display-flex flex-column">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Label for 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 class="LabeledElement display-flex flex-column">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Label for a value</div>
        <div>Some value with default gap</div>
    </div>
    <div class="LabeledElement display-flex flex-column">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Label with no gap</div>Lorem ipsum dolor
    </div>
    <div class="LabeledElement display-flex flex-column">
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">
            <span>Label for styled value</span>
        </div>
        <span class="text-size-16 text-color-darker">Lorem ipsum dolor</span>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label | string \| React.ReactElement | — | The text to display for the label. |
| htmlFor | string | — | Optional ID of the element associated with the label. |
| labelProps | Omit<FormLabelProps, 'children'> | — | Additional props for the FormLabel, excluding children and htmlFor. |
| noGap | boolean | false | If true, removes the bottom margin from the label. |
| className | string | — | Additional classes for styling the wrapper. |