# RulesWrapper, RuleContainer and RuleConnector

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/rules
*Captured:* 2026-04-27T14:58:30.084Z

## RulesWrapper, RuleContainer and RuleConnector

### Example: Example 1

Default Example (interactive) Why should the rule be triggered?
Mileage

Speed

Engine Speed

When should the rule be triggered?
Immediately

When all conditions apply for at least

#### React (tsx)

```tsx
import { useEffect, useState, type JSX } from 'react';
import { isEmpty, pull, size } from 'es-toolkit/compat';

import RulesWrapper from '@rio-cloud/rio-uikit/RulesWrapper';
import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
import Button from '@rio-cloud/rio-uikit/Button';
import Tag from '@rio-cloud/rio-uikit/Tag';
import TagList from '@rio-cloud/rio-uikit/TagList';

const firstRuleSetLabel = 'Why should the rule be triggered?';

type Condition = {
    id: string;
    label: string;
    enabled: boolean;
    formElements: JSX.Element;
};

const firstRuleSet: Condition[] = [
    {
        id: 'Mileage',
        label: 'Mileage is greater than',
        enabled: true,
        formElements: (
            <div className='width-100pct margin-bottom-0'>
                <div className='input-group min-width-100'>
                    <input className='form-control' type='text' name='value' />
                    <div className='input-group-addon'>km</div>
                </div>
            </div>
        ),
    },
    {
        id: 'Speed',
        label: 'Speed is greater than',
        enabled: true,
        formElements: (
            <div className='width-100pct margin-bottom-0'>
                <div className='input-group min-width-100'>
                    <input className='form-control' type='text' name='value' />
                    <div className='input-group-addon'>km</div>
                </div>
            </div>
        ),
    },
    {
        id: 'Engine Speed',
        label: 'Engine speed is greater than',
        enabled: true,
        formElements: (
            <div className='width-100pct margin-bottom-0'>
                <div className='input-group min-width-100'>
                    <input className='form-control' type='text' name='value' />
                    <div className='input-group-addon'>rpm</div>
                </div>
            </div>
        ),
    },
];

export default () => {
    const [firstConditionsSelected, setFirstConditionsSelected] = useState<string[]>([]);

    const handleSelectFirstCondition = (conditionId: string) =>
        setFirstConditionsSelected([...firstConditionsSelected, conditionId]);

    const handleRemoveFirstCondition = (conditionId: string) =>
        setFirstConditionsSelected(pull(firstConditionsSelected, conditionId));

    const availableFirstConditions: Condition[] = firstRuleSet.filter(condition => condition.enabled);

    const hasMoreFirstConditions = size(firstConditionsSelected) !== size(firstRuleSet);

    const allConditionsSelected = size(firstConditionsSelected) === size(availableFirstConditions);

    const [secondRuleSelected, setSecondRuleSelected] = useState(false);

    return (
        <div>
            <label>Default Example (interactive)</label>
            {/* First rule set */}
            <RulesWrapper>
                <RuleContainer key='AllRuleTags' show={isEmpty(firstConditionsSelected)} unchecked>
                    <ConditionsList
                        label={firstRuleSetLabel}
                        conditions={firstRuleSet}
                        selectedConditions={firstConditionsSelected}
                        onConditionSelected={handleSelectFirstCondition}
                    />
                </RuleContainer>
                {firstConditionsSelected.map((selectedCondition, index) => {
                    const isLastCondition = index === size(firstConditionsSelected) - 1;
                    const condition = availableFirstConditions.find(condition => condition.id === selectedCondition);
                    if (!condition) {
                        return null;
                    }
                    return (
                        <RuleContainer
                            key={selectedCondition}
                            show={!isEmpty(firstConditionsSelected)}
                            hideConnector={isLastCondition && allConditionsSelected}
                        >
                            <ConditionEditor condition={condition} onDelete={handleRemoveFirstCondition} />
                        </RuleContainer>
                    );
                })}
                <RuleContainer
                    key='AddMore'
                    show={!isEmpty(firstConditionsSelected) && hasMoreFirstConditions}
                    hideConnector
                >
                    <ConditionsList
                        showMoreOption={hasMoreFirstConditions}
                        label={firstRuleSetLabel}
                        conditions={firstRuleSet}
                        selectedConditions={firstConditionsSelected}
                        onConditionSelected={handleSelectFirstCondition}
                    />
                </RuleContainer>
            </RulesWrapper>

            {/* Second rule set */}
            <RulesWrapper>
                <RuleContainer key='secondRuleSet' unchecked={!secondRuleSelected} hideConnector={secondRuleSelected}>
                    {secondRuleSelected ? (
                        <ConditionEditorTwo onDelete={() => setSecondRuleSelected(false)} />
                    ) : (
                        <ConditionsTwo onRuleSelect={() => setSecondRuleSelected(true)} />
                    )}
                </RuleContainer>
            </RulesWrapper>
        </div>
    );
};

// Custom components to fill the rules container - this usually is service logic and are service specific components

type ConditionsListProps = {
    showMoreOption?: boolean;
    label: string;
    conditions: Condition[];
    selectedConditions: string[];
    onConditionSelected: (id: string) => void;
};

const ConditionsList = ({
    showMoreOption = false,
    label,
    conditions = [],
    selectedConditions = [],
    onConditionSelected,
}: ConditionsListProps) => {
    const [showMore, setShowMore] = useState(showMoreOption);
    useEffect(() => setShowMore(showMoreOption), [showMoreOption]);

    const handleSelectOption = (conditionId: string) => {
        setShowMore(true);
        onConditionSelected(conditionId);
    };

    return (
        <div className='display-flex flex-column align-items-center'>
            {showMore && (
                <div
                    key='moreButton'
                    className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'
                    onClick={() => setShowMore(false)}
                >
                    Which additional conditions should count for this rule?
                </div>
            )}
            {!showMore && (
                <div key='tagList' className='display-flex flex-column align-items-center gap-15'>
                    <div className='text-center'>{label}</div>
                    <TagList>
                        {conditions.map(condition => {
                            if (selectedConditions.includes(condition.id)) {
                                return null;
                            }
                            return (
                                <Tag
                                    key={condition.id}
                                    clickable={condition.enabled}
                                    disabled={!condition.enabled}
                                    onClick={() => handleSelectOption(condition.id)}
                                    round={false}
                                >
                                    {condition.id}
                                </Tag>
                            );
                        })}
                    </TagList>
                </div>
            )}
        </div>
    );
};

type ConditionEditorProps = { condition: Condition; onDelete: (id: string) => void };

const ConditionEditor = ({ condition, onDelete }: ConditionEditorProps) => (
    <form>
        <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
            <div className='flex-1-1-0 line-height-125rel'>{condition.label}</div>
            <div className='flex-1-1-0 display-flex gap-10'>
                {condition.formElements}
                <Button bsStyle={Button.MUTED} iconOnly onClick={() => onDelete(condition.id)}>
                    <span className='rioglyph rioglyph-trash' />
                </Button>
            </div>
        </div>
    </form>
);

type ConditionsTwoProps = { onRuleSelect: VoidFunction };

const ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => (
    <div className='display-flex flex-column align-items-center gap-15'>
        <div className='text-center'>When should the rule be triggered?</div>
        <TagList>
            <Tag active clickable={false} round={false}>
                Immediately
            </Tag>
            <Tag clickable onClick={onRuleSelect} round={false}>
                When all conditions apply for at least
            </Tag>
        </TagList>
    </div>
);

type ConditionEditorTwpProps = { onDelete: VoidFunction };

const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => (
    <form>
        <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
            <div className='flex-1-1-0 line-height-125rel'>When all conditions apply for at least</div>
            <div className='flex-1-1-0 display-flex gap-10'>
                <div className='width-100pct margin-bottom-0'>
                    <div className='input-group min-width-100'>
                        <input className='form-control' type='text' name='value' />
                        <div className='input-group-addon'>minutes</div>
                    </div>
                </div>
                <Button bsStyle={Button.MUTED} iconOnly onClick={onDelete}>
                    <span className='rioglyph rioglyph-trash' />
                </Button>
            </div>
        </div>
    </form>
);
```

#### HTML (html)

```html
<div>
    <label>Default Example (interactive)</label>
    <div>
        <div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
                    <div style="opacity: 0;">
                        <div class="display-flex flex-column align-items-center">
                            <div class="display-flex flex-column align-items-center gap-15">
                                <div class="text-center">Why should the rule be triggered?</div>
                                <div class="taglist taglist-autowidth">
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Mileage</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Speed</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Engine Speed</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
                    <div style="opacity: 0;">
                        <div class="display-flex flex-column align-items-center gap-15">
                            <div class="text-center">When should the rule be triggered?</div>
                            <div class="taglist taglist-autowidth">
                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                    <div class="tag-inner">Immediately</div>
                                </div>
                                <div class="tag clickable rounded">
                                    <div class="tag-inner">When all conditions apply for at least</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: RuleContainer

### RuleContainer

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| show | boolean | true | Defines whether the container is shown. |
| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
| background | string | 'bg-lightest' | The box background class name. |
| borderColor | string | — | The border color class name. |
| hideConnector | boolean | false | Defines whether the connector is shown. |
| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
| className | string | — | Additional classes for the wrapper element. |

#### Props: RuleConnector

### RuleConnector

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
| hidden | boolean | false | Defines whether the connector is shown. |
| background | string | 'bg-lightest' | Background color of the connector itself. |
| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
| hasBorder | boolean | false | Defines whether the connector has a border. |
| borderColor | string | — | The border color class name. |
| className | string | — | Additional classes for the wrapper element. |

### Example: Example 2

Default Example with morde conditions - (static) Mileage is greater than
km

Which additional conditions should count for this rule?

Why should the rule be triggered?
Category A Mileage

Fuel Level

Engine speed

Driving/standing

Category B Remaining daily driving time

Remaining weekly driving time

Daily driving time

Weekly driving time

Category C Driver Card

Power take-off

Inside/Outside geofence

Inside/Outside Country

When should the rule be triggered? Immediately

When all conditions apply for at least

#### React (tsx)

```tsx
import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
import Button from '@rio-cloud/rio-uikit/Button';
import TagList from '@rio-cloud/rio-uikit/TagList';
import Tag from '@rio-cloud/rio-uikit/Tag';
import RulesWrapper from '@rio-cloud/rio-uikit/components/rules/RulesWrapper';

export default () => (
    <div>
        <label>Default Example with morde conditions - (static)</label>
        <RulesWrapper>
            <RuleContainer>
                <form>
                    <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
                        <div className='flex-1-1-0 line-height-125rel'>Mileage is greater than</div>
                        <div className='flex-1-1-0 display-flex gap-10'>
                            <div className='width-100pct margin-bottom-0'>
                                <div className='input-group min-width-100'>
                                    <input className='form-control' type='text' name='value' />
                                    <div className='input-group-addon'>km</div>
                                </div>
                            </div>
                            <Button bsStyle={Button.MUTED} iconOnly>
                                <span className='rioglyph rioglyph-trash' />
                            </Button>
                        </div>
                    </div>
                </form>
            </RuleContainer>

            <RuleContainer hideConnector>
                <div className='text-center'>
                    <div className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'>
                        Which additional conditions should count for this rule?
                    </div>
                </div>
            </RuleContainer>

            <RuleContainer unchecked hideConnector>
                <span className='display-flex align-items-center justify-content-center'>
                    <span data-testid='AddCondition-message'>Why should the rule be triggered?</span>
                </span>

                <div className='display-flex flex-wrap gap-20 margin-top-20'>
                    <div className='flex-1-1-0'>
                        <legend>Category A</legend>
                        <TagList>
                            <Tag round={false} clickable>
                                Mileage
                            </Tag>
                            <Tag round={false} clickable>
                                Fuel Level
                            </Tag>
                            <Tag round={false} clickable>
                                Engine speed
                            </Tag>
                            <Tag round={false} clickable>
                                Driving/standing
                            </Tag>
                        </TagList>
                    </div>
                    <div className='flex-1-1-0'>
                        <legend>Category B</legend>
                        <TagList>
                            <Tag round={false} clickable>
                                Remaining daily driving time
                            </Tag>
                            <Tag round={false} clickable>
                                Remaining weekly driving time
                            </Tag>
                            <Tag round={false} clickable>
                                Daily driving time
                            </Tag>
                            <Tag round={false} clickable>
                                Weekly driving time
                            </Tag>
                        </TagList>
                    </div>
                    <div className='flex-1-1-0'>
                        <legend>Category C</legend>
                        <TagList>
                            <Tag round={false} clickable>
                                Driver Card
                            </Tag>
                            <Tag round={false} clickable>
                                Power take-off
                            </Tag>
                            <Tag round={false} clickable>
                                Inside/Outside geofence
                            </Tag>
                            <Tag round={false} clickable>
                                Inside/Outside Country
                            </Tag>
                        </TagList>
                    </div>
                </div>
            </RuleContainer>

            <RuleContainer unchecked>
                <div className='display-flex flex-column align-items-center gap-15'>
                    <span>When should the rule be triggered?</span>

                    <TagList>
                        <Tag round={false} active clickable={false}>
                            Immediately
                        </Tag>
                        <Tag round={false} clickable>
                            When all conditions apply for at least
                        </Tag>
                    </TagList>
                </div>
            </RuleContainer>
        </RulesWrapper>
    </div>
);
```

#### HTML (html)

```html
<div>
    <label>Default Example with morde conditions - (static)</label>
    <div>
        <div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest" data-testid="ruleContainerBox">
                    <div style="opacity: 1;">
                        <form>
                            <div class="display-flex align-items-center gap-10 flex-1-1 flex-wrap">
                                <div class="flex-1-1-0 line-height-125rel">Mileage is greater than</div>
                                <div class="flex-1-1-0 display-flex gap-10">
                                    <div class="width-100pct margin-bottom-0">
                                        <div class="input-group min-width-100">
                                            <input class="form-control" type="text" name="value">
                                            <div class="input-group-addon">km</div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                                        <span class="rioglyph rioglyph-trash">
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest" data-testid="ruleContainerBox">
                    <div style="opacity: 1;">
                        <div class="text-center">
                            <div class="text-center text-color-primary hover-text-color-highlight-dark cursor-pointer">Which additional conditions should count for this rule?</div>
                        </div>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
                    <div style="opacity: 1;">
                        <span class="display-flex align-items-center justify-content-center">
                            <span data-testid="AddCondition-message">Why should the rule be triggered?</span>
                        </span>
                    </div>
                    <div style="opacity: 1;">
                        <div class="display-flex flex-wrap gap-20 margin-top-20">
                            <div class="flex-1-1-0">
                                <legend>Category A</legend>
                                <div class="taglist taglist-autowidth">
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Mileage</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Fuel Level</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Engine speed</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Driving/standing</div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1-1-0">
                                <legend>Category B</legend>
                                <div class="taglist taglist-autowidth">
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Remaining daily driving time</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Remaining weekly driving time</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Daily driving time</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Weekly driving time</div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1-1-0">
                                <legend>Category C</legend>
                                <div class="taglist taglist-autowidth">
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Driver Card</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Power take-off</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Inside/Outside geofence</div>
                                    </div>
                                    <div class="tag clickable rounded">
                                        <div class="tag-inner">Inside/Outside Country</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
            <div class="RuleContainer">
                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
                    <div style="opacity: 1;">
                        <div class="display-flex flex-column align-items-center gap-15">
                            <span>When should the rule be triggered?</span>
                            <div class="taglist taglist-autowidth">
                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                    <div class="tag-inner">Immediately</div>
                                </div>
                                <div class="tag clickable rounded">
                                    <div class="tag-inner">When all conditions apply for at least</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="right-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                        <span class="text-color-light">
                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                            </span>
                        </span>
                    </span>
                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                        <div class="left-50pct position-relative width-20 height-20 bg-white">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: RuleContainer

### RuleContainer

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| show | boolean | true | Defines whether the container is shown. |
| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
| background | string | 'bg-lightest' | The box background class name. |
| borderColor | string | — | The border color class name. |
| hideConnector | boolean | false | Defines whether the connector is shown. |
| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
| className | string | — | Additional classes for the wrapper element. |

#### Props: RuleConnector

### RuleConnector

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
| hidden | boolean | false | Defines whether the connector is shown. |
| background | string | 'bg-lightest' | Background color of the connector itself. |
| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
| hasBorder | boolean | false | Defines whether the connector has a border. |
| borderColor | string | — | The border color class name. |
| className | string | — | Additional classes for the wrapper element. |

### Example: AND

Custom Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

AND

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

OR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

#### React (tsx)

```tsx
import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
import RuleConnector from '@rio-cloud/rio-uikit/RuleConnector';
import { dummyTextExtraShort } from '../../../utils/data';

const background = 'bg-white';

export default () => (
    <div>
        <label>Custom Example</label>
        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='AND' />}>
            {dummyTextExtraShort}
        </RuleContainer>

        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='OR' />}>
            {dummyTextExtraShort}
        </RuleContainer>

        <RuleContainer className='border' background={background} hideConnector>
            {dummyTextExtraShort}
        </RuleContainer>
    </div>
);

const CustomConnector = ({ value }: { value: string }) => (
    <RuleConnector
        background={background}
        pageBackground='bg-lightest'
        placement='start'
        hasBorder
        borderColor='border-color-light'
    >
        <span className='text-color-dark text-size-12'>{value}</span>
    </RuleConnector>
);
```

#### HTML (html)

```html
<div>
    <label>Custom Example</label>
    <div class="RuleContainer">
        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
            <div style="opacity: 1;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
        </div>
        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-start align-items-center position-relative">
            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
                <div class="right-50pct position-relative width-20 height-20 bg-lightest">
                </div>
            </div>
            <span class="padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white">
                <span class="text-color-light">
                    <span class="text-color-dark text-size-12">AND</span>
                </span>
            </span>
            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
                <div class="left-50pct position-relative width-20 height-20 bg-lightest">
                </div>
            </div>
        </div>
    </div>
    <div class="RuleContainer">
        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
            <div style="opacity: 1;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
        </div>
        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-start align-items-center position-relative">
            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
                <div class="right-50pct position-relative width-20 height-20 bg-lightest">
                </div>
            </div>
            <span class="padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white">
                <span class="text-color-light">
                    <span class="text-color-dark text-size-12">OR</span>
                </span>
            </span>
            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
                <div class="left-50pct position-relative width-20 height-20 bg-lightest">
                </div>
            </div>
        </div>
    </div>
    <div class="RuleContainer">
        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
            <div style="opacity: 1;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
        </div>
        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                <div class="right-50pct position-relative width-20 height-20 bg-white">
                </div>
            </div>
            <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
                <span class="text-color-light">
                    <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
                    </span>
                </span>
            </span>
            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
                <div class="left-50pct position-relative width-20 height-20 bg-white">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: RuleContainer

### RuleContainer

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| show | boolean | true | Defines whether the container is shown. |
| unchecked | boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
| background | string | 'bg-lightest' | The box background class name. |
| borderColor | string | — | The border color class name. |
| hideConnector | boolean | false | Defines whether the connector is shown. |
| customConnector | string \| JSX.Element | — | Overwrites the default connector. |
| className | string | — | Additional classes for the wrapper element. |

#### Props: RuleConnector

### RuleConnector

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| placement | 'start' \| 'center' \| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |
| icon | string | 'rioglyph-plus' | The rioglyph icon name. |
| hidden | boolean | false | Defines whether the connector is shown. |
| background | string | 'bg-lightest' | Background color of the connector itself. |
| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |
| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |
| hasBorder | boolean | false | Defines whether the connector has a border. |
| borderColor | string | — | The border color class name. |
| className | string | — | Additional classes for the wrapper element. |