Split Control

Split controls are commonly used in HYVOR for settings and configuration options. They are a combination of a label/caption (left side) and a control (right side) such as a text input, checkbox, or select. On mobile, the label/caption is displayed above the control.

Properties

Slots

Examples

Basic Split Control

<SplitControl 
    label="Language"
    caption="The language to use for the site."
>
    <TextInput />
</SplitControl>

Using Slots for Label and Caption

You can use slots for the label and caption if you need to add more complex content. <Label> and <Caption> components (see Form Control) or any other element/component can be used in the slots.

<SplitControl>
    <Label slot="label">Spam Detection</Label>
    <Caption slot="caption">Check for spam in comments</Caption>
    <Switch />
</SplitControl>

Nested Split Controls

You can nest split controls inside of other split controls by adding nested content inside the nested slot. The parent split control may or may not have a control on the right side. The nested split controls will be indented.

<SplitControl label="Guest Commenting" caption="Comment without logging in">
    <Switch />
    <div slot="nested">
        <SplitControl label="Guest Comment Moderation" caption="Moderate guest comments before they are published.">
            <Switch />
        </SplitControl>
    </div>
</SplitControl>