Form Controls

CheckField

A form control for selecting options using either checkboxes or radio buttons.

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>
    <span class="label" conditional>
      {label}
      <span class="extra" conditional>{extra}</span>
    </span>
    <span class="aux" conditional>{aux}</span>
  </div>
  <div class="middle">
    {#each options as { value, text }, i}
      <label class="main">
        <input class="left" bind:this={elements[i]} use:action />
        <span class="right">{text}</span>
      </label>
    {/each}
  </div>
  <div class="bottom" conditional>{bottom}</div>
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript

interface CheckFieldProps {
  options: SvelteMap<string, string> | Map<string, string>;
  label?: string;
  extra?: string;
  aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
  bottom?: string;
  descFirst?: boolean; // (false)
  values?: string[]; // bindable
  multiple?: boolean; // (true)
  validations?: CheckFieldValidation[];
  attributes?: HTMLInputAttributes;
  action?: Action;
  elements?: HTMLInputElement[]; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

options - Sets of display text and their corresponding values
multiple - If true, input type is set to checkbox, otherwise to radio
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

If options is empty, the component will not be rendered.

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-check-field

Exports

Types

TypeScript

type CheckFieldReqdProps = "options";
type CheckFieldBindProps = "values" | "variant" | "elements";
type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like