Form Controls

ToggleGroupField

A form control for selecting one or multiple options from a set of toggle buttons.

Toggle Group Field

Select your options

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte

<div class="whole">
  <div class="top" conditional>
    <label class="label" conditional>
      {label}
      <span class="extra" conditional>{extra}</span>
    </label>
    <span class="aux" conditional>{aux}</span>
  </div>
  <div class="middle">
    <span class="left" conditional>{left}</span>
    <ToggleGroup {options} {multiple} {...deps.svsToggleGroup} {...restProps} bind:values />
    <span class="right" conditional>{right}</span>
  </div>
  <div class="bottom" conditional>{bottom}</div>
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript

interface ToggleGroupFieldProps {
  options: SvelteMap<string, string> | Map<string, string>;
  label?: string;
  extra?: string;
  aux?: Snippet<[string[], string]>; // Snippet<[values,variant]>
  left?: Snippet<[string[], string]>; // Snippet<[values,variant]>
  right?: Snippet<[string[], string]>; // Snippet<[values,variant]>
  bottom?: string;
  descFirst?: boolean; // (false)
  values?: string[]; // bindable
  multiple?: boolean; // (true)
  validations?: ToggleGroupFieldValidation[];
  name?: string;
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
  deps?: ToggleGroupFieldDeps;
  [key: string]: unknown | Snippet;
}

Additional Props

descFirst - When true, the bottom element is moved between the top element and the middle element
validations - Array of validation functions used to validate input values
name - The name attribute for form submission

Styling

To learn more, see Styling.

Variant Management

In the initial state or when there is no input value, neutral is applied. After a value is entered, if the value validation succeeds, it switches to active; if it fails, it switches to neutral temporarily. When validating the form, inactive is applied when validation fails. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-toggle-group-field

Exports

Types

TypeScript

interface ToggleGroupFieldDeps {
  svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
}
type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
type ToggleGroupFieldReqdProps = "options";
type ToggleGroupFieldBindProps = "values" | "variant";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Toggle Group Field

Select your options

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like