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

Name
Description
label
The label to display on the left side of the split control.
caption
The caption to display on the left side of the split control. This is displayed below the label, and is usually used to provide more information about the control.
flex
Set flex values of the left and right sides of the split control. The default value is [1,2].

Slots

Name
Description
default
The control to display on the right side of the split control.
label
This can be used instead of the label property.
caption
This can be used instead of the caption property.
nested
To nest split controls inside of other split controls. See Nested Split Controls below.

Examples

Basic Split Control

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

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>
Check for spam in comments

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>
Comment without logging in
Moderate guest comments before they are published.

Flex Property

You can set the the flex values for the left and right sides of the split control using the flex property. The default value is [1,2].

<SplitControl 
    label="Name"
    caption="The name of the site."
    flex={[1,1]}
>
    <TextInput 
        type="text"
        value="HYVOR"
        block
    />
</SplitControl>
The name of the site.

Column Property

You can set the split control to display as a column using the column property.

<SplitControl 
    label="Name"
    caption="The name of the site."
    column
>
    <TextInput 
        type="text"
        value="HYVOR"
        block
    />
</SplitControl>
The name of the site.