Toggles

ipl-toggle

View Source

<ipl-toggle v-model="value" />

ipl-toggle is a large toggle switch, made to readable as quickly and easily as possible. It is used for important or frequently-used functions (Such as a switch for showing or hiding a graphic on a live broadcast.)

Custom Labels

View Source

<ipl-toggle
    v-model="value"
    :use-neutral-colors="useNeutralColors"
    true-label="True!"
    false-label="False! (Filler text to force this option to wrap onto multiple lines :))"
/>

ipl-small-toggle

View Source

<ipl-small-toggle
    v-model="value"
    label="Small Toggle"
    :disabled="disabled"
/>
<ipl-small-toggle
    v-model="value"
    :disabled="disabled"
>
    Label from slot<br>
    <small>Extra line of text</small>
</ipl-small-toggle>
<div>
    <ipl-small-toggle
        v-model="value"
        :disabled="disabled"
    />
</div>

ipl-small-toggle is a smaller toggle switch, used for less critical functions.

ipl-checkbox

View Source

<ipl-checkbox
    v-model="value"
    label="Checkbox"
    :disabled="disabled"
    :small="small"
/>
<ipl-checkbox
    v-model="value"
    :disabled="disabled"
    :small="small"
>
    Label from slot<br>
    <small>Extra line of text</small>
</ipl-checkbox>
<div>
    <ipl-checkbox
        v-model="value"
        :disabled="disabled"
        :small="small"
    />
</div>

ipl-checkbox is typically used for less frequently used functions. It is built to take up little space to keep focus on more critical functions.