VfCheckbox

Basic

A single checkbox with inline text.

I agree to the terms

<VfCheckbox name="terms" text="I agree to the terms" />

<template>
  <VfCheckbox name="terms" text="I agree to the terms" />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  terms: {
    type: 'checkbox',
    text: 'I agree to the terms',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

True / False Values

The trueValue and falseValue props control what values the checkbox produces when checked and unchecked. Defaults are true and false.

Active

<VfCheckbox name="status" true-value="active" false-value="inactive" />

<template>
  <VfCheckbox name="status" text="Active" true-value="active" false-value="inactive" />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  status: {
    type: 'checkbox',
    text: 'Active',
    trueValue: 'active',
    falseValue: 'inactive',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Align

The align prop positions the text relative to the checkbox input. Available values are 'right' (default) and 'left'.

Right aligned

Left aligned

<VfCheckbox name="right" text="Right aligned" align="right" />
<VfCheckbox name="left" text="Left aligned" align="left" />

<template>
  <VfCheckbox name="right" text="Right aligned" align="right" />
  <VfCheckbox name="left" text="Left aligned" align="left" />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  right: {
    type: 'checkbox',
    text: 'Right aligned',
    align: 'right',
  },
  left: {
    type: 'checkbox',
    text: 'Left aligned',
    align: 'left',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Disabled

The disabled prop prevents interaction. Both checked and unchecked states are shown. It also accepts conditions.

Disabled

Disabled checked

<VfCheckbox name="unchecked" text="Disabled" disabled />
<VfCheckbox name="checked" text="Disabled checked" :default="true" disabled />

<template>
  <VfCheckbox name="unchecked" text="Disabled" disabled />
  <VfCheckbox name="checked" text="Disabled checked" :default="true" disabled />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  unchecked: {
    type: 'checkbox',
    text: 'Disabled',
    disabled: true,
  },
  checked: {
    type: 'checkbox',
    text: 'Disabled checked',
    default: true,
    disabled: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Props

Configure the component's behavior and appearance with these props.

General

Prop	Default	Description
name	—	Required. The element's unique identifier and path in the current level of form data model.
type	'checkbox'	The element type identifier.
id	—	The HTML id attribute for the input element.

Layout

Prop	Default	Description
label	—	The label displayed alongside the element.
hideLabel	false	Whether to visually hide the element's label.
page	—	Page configuration for stepped/tabbed forms. Accepts a simple label or a metadata tuple with at least a label property.
help	—	A help text displayed below the label.
align	—	Positions the label text relative to the checkbox (left, right, or auto).
columns	—	Responsive grid column sizing for the element's layout.
layout	true	Custom layout template for this element, false to render the element without any layout wrapper, or true (default) for normal layout.
spaceTop	—	Adds vertical spacing (padding) above the element. The value maps to a spacing token (1-3): 1 = var(--vf-space-1), ....
spaceBottom	—	Adds vertical spacing (padding) above the element. The value maps to a spacing token (1-3): 1 = var(--vf-space-1), ....
lineTop	false	Renders a horizontal line (border) above the element.
lineBottom	false	Renders a horizontal line (border) below the element.

Input

Prop	Default	Description
trueValue	true	The value used when the checkbox is checked. Also drives one arm of the model type. Includes a naked boolean arm alongside TTrueValue so the erased schema surface (and blueprint defaults) still accept true / false literals. Concrete values continue to infer into TTrueValue.
falseValue	false	The value used when the checkbox is unchecked. Also drives one arm of the model type. Includes a naked boolean arm alongside TFalseValue so the erased schema surface (and blueprint defaults) still accept true / false literals. Concrete values continue to infer into TFalseValue.
checkboxName	—	Overrides the HTML name attribute for the checkbox input.
text	—	The label text displayed next to the checkbox.
noExpressions	false	Disables expression resolution for this element. Applies to the element itself only (container elements don't cascade it to their children), and a form-level noExpressions cannot be overridden by setting it to false here.
description	—	A description text displayed below the element.
sensitive	false	Whether the element holds sensitive data (passwords, payment details, …). Sensitive values are excluded from locally stored drafts. On a container, the whole subtree is excluded.
disabled	—	Whether the element is disabled.
aligned	false	Whether the element should vertically align with adjacent form controls.

Data

Prop	Default	Description
modelValue	—	The current value of the element (v-model).
default	—	The default/initial value of the element. Being expressionable, a {...} expression string is accepted alongside the model type.
submit	true	Whether the element value is included in form submission data.
untrackOn	—	Controls when the element stops tracking user changes.
detached	false	Whether the element is detached from the form's element registry and data model (if applicable).
transformPayload	—	Transforms the element's value when submitting the form.

Validation

Prop	Default	Description
rules	—	Validation rules to apply to the element.
validateOn	—	Controls when validation is triggered (e.g. on change, blur, or submit).
debounce	—	Delay in milliseconds before processing input.
bail	true	Whether to stop validation after the first failing rule.
ruleMessages	—	Custom error messages keyed by validation rule name.
displayName	—	The display name used in validation error messages.
maxErrors	1	Maximum number of validation errors to display at once.
hideErrors	false	Whether to hide validation error messages.
showRequired	—	Where to show required field indicators (e.g. label, placeholder).
hoist	false	Whether to push the element's errors to its nearest ancestor element.

Conditions

Prop	Default	Description
conditions	—	Conditions that control the element's visibility and availability.
conditionsTrigger	—	The source that triggers re-evaluation of this element's async conditional props (conditions, disabled, readonly, and validation rule conditions). Accepts an array of element paths whose values are watched, a Ref, or a function used as a watch getter. When omitted, any change in the form model re-triggers evaluation.
conditionsDebounce	—	The debounce delay in milliseconds applied before re-evaluating this element's async conditional props when the trigger source changes. Overrides the global $conditions.debounce config (default 300).

Customization

Prop	Default	Description
parts	—	Custom DOM attribute overrides for the component's structural parts.
class	—	CSS classes to apply to the component's root element.
classes	—	Custom CSS class overrides for the component's structural parts.
reclass	—	CSS class overrides that replace (rather than merge with) default classes.
tokens	—	Token overrides applied to the element's CSS custom properties.
slots	—	Custom Vue components to use for named slots. Every component resolves it through the standard outlets pipeline (see useOutlets).
presets	—	Named configuration presets to apply to the component.
template	—	A custom Vue component to use as the template instead of the default.
component	—	A custom Vue component to render in the component's default slot.

Context

Reactive properties and methods accessible on the component's Context object.

General

Name	Description
type	The element's type identifier (e.g. "text", "checkbox", "select").
name	The element's name as a string ref.
props	The resolved component props with defaults applied.

Checkbox

Name	Description
description	The resolved description text for the element.
descriptionId	The DOM id for the element's description text region.
validation	Per-language validation views keyed by language (default for non-translatable elements).
validator	The validator instance the element is registered with: the form's validator, a store-attached one, or a newly created one.
shouldValidate	Whether the element should validate live on user input, per the validateOn policy and the form's state.
onUserInput()	Validates the element on user input when the live-validation policy allows it.
isFlatContainer	Whether the element's data is flattened into the parent container rather than nested under its own name key.
containerModel	The model ref the element provides to its children via the container context: the parent's model for flat containers, the element's own model otherwise.
handleModelUpdate()	Handles a native input event and updates the model from the event target.
initValidation()	Registers the element with the validator and compiles its rules.
destroyValidation()	Unregisters the element from the validator and clears its validation views.
rootModel	The root model backing the form when this element operates as the form root, undefined for every other element.
sensitivePaths	Data paths holding sensitive data (sensitive: true) within this element's subtree — excluded from locally stored drafts.
setInputRef()	Registers the underlying input element. Bind it as a function ref in custom templates and slots (:ref="context.setInputRef") — the context members are read-only there, so inputRef can't be assigned directly. Receives the element (or component instance) on mount and null on unmount, like any function ref.
canonicalDomValue	Whether the registered input's DOM value is the model's own serialization (see MakeInputConfig). Gates both handleInput's event-value pickup and the DOM recovery listeners.
inputBindings	Spreadable bindings for a native text-like input rendered without v-model: v-bind="context.inputBindings" wires the ref, the user-input report (which also performs the write — the DOM recovery and write-back watchers complete the two-way sync), and the interaction listeners.
componentBindings	Spreadable bindings for a component input rendered without v-model: v-bind="context.componentBindings" wires modelValue, the update:modelValue handler (write + user-input report), and the interaction listeners for components that emit focus / blur.

Data

Name	Description
model	The element's reactive model value within the form data tree.
value	The current language-aware value of the element. For translatable elements, returns the value for the active language.
payload	The element's submission payload. Container elements aggregate from children; leaf elements return their own value.
nullValue	The value the element holds when it is considered empty. For translatable elements a per-language object is returned.
initialModel	A snapshot of the model at initialization time, used for dirty checking and reset.
dataPath	The dot-notation path to this element's value within the form data object (e.g. "address.city"). Empty string for the root model. Flat containers inherit their parent's data path.
tracking	Whether the element's default expression is currently tracked and auto-updating the value.
update()	Updates the element's model value. Container elements perform a deep merge; leaf elements set the value directly.
load()	Loads data into the element and fires the load event, cascading to all children.
reset()	Resets the element to its initial model state and fires the reset event.
clear()	Clears the element to its null value and fires the clear event.
track()	Resumes expression tracking after an untrack, immediately re-writing the resolved value.
untrack()	Stops expression tracking, leaving the current value in place.
reinit()	Reinitializes the element by rebuilding both its model registration and validation instances.

State

Name	Description
visible	Whether the element is currently visible, based on availability, container visibility, and pager state.
available	Whether the element is available (not hidden by conditional logic).
disabled	Whether the element is currently disabled, considering form state, parent container state, local override, and the disabled prop. The prop is evaluated through the conditions pipeline, so sync and async conditional values are supported uniformly.
focused	Whether the element is currently focused.
touched	Whether the element has been touched (blurred) by the user.
visited	Whether the element has been visited (focused) by the user.
dirty	Whether the current model value differs from the initial model value.
empty	Whether the element's current value is empty. Container elements check whether all children are empty.
busy	Whether the element is busy, meaning it is either debouncing or has pending async validation.
hoisted	Whether this element pushes its errors to its nearest ancestor element instead of displaying and reporting them itself.
enable()	Programmatically enables the element.
disable()	Programmatically disables the element.

Validation

Name	Description
invalid	Whether any of the element's validations (across all languages) are currently invalid, including children.
validated	Whether all of the element's validations (across all languages) have been executed, including children.
completed	Whether the element is completed, meaning it either has no rules or has been validated without errors.
success	Whether the element has been validated and passed (always true for elements without own rules), once touched.
pending	Whether any of the element's validations are currently pending an async check, including children.
debouncing	Whether any of the element's validations are currently debouncing, including children.
errors	All error messages for this element: its own plus any pushed up by hoisted children.
hasError	Whether the element has any active error messages.
displayErrors	The error messages rendered for this element. Empty when the element pushes its errors to its parent; otherwise errors capped by maxErrors.
ownErrors	The element's own error messages (validation rules plus custom message bag entries).
formErrors	Error messages propagated to the form, keyed by element path. Empty when the element pushes its errors to its parent.
messages	The list of custom messages from the message bag, including messages from hoisted children.
messageBag	The element's message bag for custom errors and messages.
required	Whether the element is required by its current validation rules.
genericName	A human-readable name resolved from displayName, label, floating, placeholder, or the element's name prop.
validate()	Runs validation on the element's own rules and all children, returning whether everything is valid.
validateSelf()	Validates the element's own rules (without children), resolving with the result.
validateChildren()	Validates stateful children, returning whether all are valid. By default only incomplete children run.
invalidate()	Marks all validation instances as invalidated, requiring revalidation.
unvalidate()	Resets all validation state, including children's.
filled()	Checks whether a value is considered filled.
clean()	Marks the element as clean by updating the initial model snapshot.
clearErrors()	Clears all error messages from the message bag.
clearMessages()	Clears all custom messages from the message bag.
clearMessageBag()	Clears the entire message bag, removing both errors and messages.

Layout

Name	Description
inputRef	Ref to the underlying input element.
inputName	The resolved HTML name attribute, falling back to the parent checkboxes container path or element path.
id	The resolved element id, using the id prop or falling back to the auto-generated uid.
text	The resolved text content, supporting static strings and dynamic text props.
label	The resolved label text for the element.
help	The resolved help text for the element.
page	Page metadata for stepped/tabbed forms.
classes	The resolved CSS class map for the component.
parts	The resolved DOM attribute overrides for internal elements.
viewLoaded	Whether the element's view has been loaded (used for lazy rendering optimization).
$el	Reference to the component's root DOM element.
resolvedColumns	Resolved column sizes per breakpoint, normalized into container/label/wrapper/group values.
updateColumns()	Updates the column configuration programmatically.
scrollTo()	Scrolls the window to this element. If the element belongs to a step or tab, that page is selected first before scrolling.
focus()	Focuses the first focusable HTML element (input, select, textarea, button, etc.) within the wrapper. Optionally scrolls to the element first.

Tree

Name	Description
form$	The parent form's context, providing access to form-level state and methods.
path	The element's dot-notation path in the form tree (e.g. "user.name").
componentName	The resolved Vue component name for this element.
container	The container context providing path, model, and registration methods for child elements.
children	The child element registry providing registration, unregistration, and reactive child lists.

Events

Name	Description
fire()	Fires an event synchronously, invoking before, main, and after listeners in order.
fireAsync()	Fires an event asynchronously, awaiting each callback and short-circuiting when any returns false.
on()	Subscribes a callback to a specific event.
off()	Removes a previously registered event callback.
onBefore()	Registers a callback that runs before the main event listeners.
onAfter()	Registers a callback that runs after the main event listeners.

Handlers

Name	Description
handleInput()	Handles a user-initiated change end to end. Bind it to the one event that means "the user changed it": @input for native text inputs, @change for native checkbox / radio / select / file controls, @update:model-value for components — alongside v-model, or without it. Accepts the new value or the native event carrying it (an event's value is read the way v-model reads it); a plain value may pass the originating event as the second argument so composition filtering still applies. Events fired during an IME composition session are ignored — the composed text arrives once, when the session ends. The value is written to the model only when the model doesn't hold it yet — with v-model in place this is a pure user-input notification, without it handleInput performs the write itself. Values resolved from native events are only picked up while canonicalDomValue is on; on formatted inputs (masks) the event carries display text, so only the notification fires, with the current model value as the payload. Either way it reports the input: fires the input event with (value, event, context$) and triggers validateOn / expression untracking. It does not touch the interaction states — visited and touched come from handleFocus / handleBlur.
handleBlur()	Fires the blur event on the element.
handleFocus()	Handles focus by setting the focused state and firing the focus event.

Accessibility

Name	Description
uid	A unique auto-generated identifier for the element.
helpId	The DOM id for the element's help text region.
errorId	The DOM id for the element's error message region.
labelId	The DOM id for the element's label region.

Events

Events emitted by the component. See Events for details.

Name	Params	Description
change	newValue, oldValue, context$	Emitted when the element value changes.
update:modelValue	value	Emitted to update the v-model binding.
load	value, context$	Emitted when the element's value is loaded programmatically via the load method.
reset	context$	Emitted when the element is reset to its default value.
clear	context$	Emitted when the element's value is cleared.
invalid	context$	Emitted when the element becomes invalid.
valid	context$	Emitted when the element becomes valid after having been invalid.
input	value, e, context$	Emitted when the input value is changed via the UI by the user.
focus	context$	Emitted when the element receives focus.
blur	context$	Emitted when the element loses focus.
beforeMount	context$	Emitted before the component is mounted.
mounted	context$	Emitted after the component is mounted.
beforeUnmount	context$	Emitted before the component is unmounted.
unmounted	context$	Emitted after the component is unmounted.
updated	context$	Emitted after the component is updated.

Slots

Named Slots for replacing parts of the component's rendering.

Name	Scope	Description
template	context	Slot that replaces the entire component rendering. Receives the full component context as a single context prop.
label	label	Slot for customizing the element's label content.
required	—	Slot for customizing the required indicator.
help	help	Slot for customizing the help text.
default	model trueValue falseValue inputName id disabled inputRef text bindings handleBlur handleFocus handleModelUpdate	Slot that replaces the default checkbox rendering. Receives input-specific props.
text	text id genericName bindings	Slot that replaces the text/label portion of the checkbox.
description	description	Slot for customizing the description text.
errors	errors	Slot for customizing the validation errors display.
messages	messages	Slot for customizing the info messages display.

Parts

DOM attribute overrides targeting internal elements. See Parts for details.

Agreement

Read the full terms before accepting

I agree to the Terms of Service

panel

The wrapper around root with display: contents when the element is a step or a tab.

Element	<div>
Classes	.vf-panel

root

The element's root wrapper.

Element	<div> <fieldset>
Classes	.vf-element .vf-space-top-1? .vf-space-top-2? .vf-space-top-3? .vf-space-bottom-1? .vf-space-bottom-2? .vf-space-bottom-3? .vf-line-top? .vf-line-bottom? .vf-checkbox
Bindings	data-align-label

labelGroup

The container holding the label and required indicator.

Element	<div>
Classes	.vf-label-group

label

The label element, associated with the control via for.

Element	<label> <span>
Classes	.vf-label
Bindings	id

required

The required indicator.

Element	<div>
Classes	.vf-required

elementGroup

The container wrapping the input and related UI.

Element	<div>
Classes	.vf-element-group

elementWrapper

The wrapper directly around the input control.

Element	<div>
Classes	.vf-element-wrapper

help

The help text area.

Element	<div>
Classes	.vf-help
Bindings	id

wrapper

The wrapper element surrounding the input and text.

Element	<div>
Classes	.vf-choice-wrapper
Bindings	data-align data-aligned

input

The checkbox input element.

Element	<input>
Classes	.vf-choice-input
Bindings	data-invalid aria-describedby aria-invalid aria-required aria-busy

text

The label/text element.

Element	<label>
Classes	.vf-choice-text

description

The description text area.

Element	<div>
Classes	.vf-description
Bindings	id

errors

The validation errors container.

Element	<div>
Classes	.vf-errors
Bindings	id role

error

An individual validation error.

Element	<div>
Classes	.vf-error

messages

The info messages container.

Element	<div>
Classes	.vf-messages

message

An individual info message.

Element	<div>
Classes	.vf-message

Tokens

All the CSS variables that control this component's appearance with default values in the default theme. See Theming Guide for details.

:root {
  /**
   * Element tokens
   * -------------------------------------------------------------------------- */
  --vf-choice-aligned-margin: calc((1lh - (var(--vf-choice-height) + var(--vf-choice-border-width-t))) / 2 + var(--vf-input-pt)) 0 0 0;
  --vf-choice-gutter: 0.375rem;

  --vf-choice-height: 1rem;
  --vf-choice-width: 1rem;

  --vf-choice-ring-color: var(--vf-brand);
  --vf-choice-ring-color-danger: var(--vf-brand);
  --vf-choice-ring-offset: -1px;
  --vf-choice-ring-shadow: none;
  --vf-choice-ring-shadow-danger: none;
  --vf-choice-ring-style: solid;
  --vf-choice-ring-width: 1px;

  --vf-choice-bg: var(--vf-white);
  --vf-choice-bg-checked: var(--vf-brand);
  --vf-choice-bg-checked-danger: var(--vf-brand);
  --vf-choice-bg-checked-disabled: var(--vf-gray-400);
  --vf-choice-bg-danger: var(--vf-white);
  --vf-choice-bg-disabled: var(--vf-bg-disabled);

  --vf-choice-border-color: var(--vf-gray-300);
  --vf-choice-border-color-checked: var(--vf-brand);
  --vf-choice-border-color-checked-danger: var(--vf-brand);
  --vf-choice-border-color-checked-disabled: var(--vf-gray-400);
  --vf-choice-border-color-danger: var(--vf-gray-300);
  --vf-choice-border-color-disabled: var(--vf-border-disabled);
  --vf-choice-border-width-b: 1px;
  --vf-choice-border-width-l: 1px;
  --vf-choice-border-width-r: 1px;
  --vf-choice-border-width-t: 1px;
  --vf-choice-radius: var(--vf-radius-sm);

  --vf-choice-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

  --vf-choice-color: inherit;
  --vf-choice-icon-color: var(--vf-white);
  --vf-choice-icon-color-danger: var(--vf-white);
  --vf-choice-icon-color-disabled: var(--vf-white);

  --vf-choice-icon-checked: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  --vf-choice-icon-selected: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3.5'/%3e%3c/svg%3e");

  /**
   * Shared element layout tokens
   * -------------------------------------------------------------------------- */
  --vf-element-line-color: var(--vf-gray-300);

  --vf-label-font-size: 1rem;
  --vf-label-font-weight: 600;
  --vf-label-group-h-padding: calc(var(--vf-py) + var(--vf-border-width-t)) 0 0 0;
  --vf-label-group-v-padding: 0 0 0.375rem 0;

  --vf-required-bg: transparent;
  --vf-required-color: inherit;
  --vf-required-content: '*';
  --vf-required-h: auto;
  --vf-required-icon: none;
  --vf-required-w: auto;

  --vf-help-bg: transparent;
  --vf-help-border-color: transparent;
  --vf-help-border-style: solid;
  --vf-help-border-width: 0;
  --vf-help-color: var(--vf-text-soft);
  --vf-help-font-size: 0.875rem;
  --vf-help-padding: 0;
  --vf-help-radius: var(--vf-radius);

  --vf-description-bg: transparent;
  --vf-description-border-color: transparent;
  --vf-description-border-style: solid;
  --vf-description-border-width: 0;
  --vf-description-color: var(--vf-text-soft);
  --vf-description-font-size: 0.875rem;
  --vf-description-padding: 0;
  --vf-description-radius: var(--vf-radius);

  --vf-errors-bg: transparent;
  --vf-errors-border-color: transparent;
  --vf-errors-border-style: solid;
  --vf-errors-border-width: 0;
  --vf-errors-color: var(--vf-red);
  --vf-errors-font-size: 0.875rem;
  --vf-errors-padding: 0;
  --vf-errors-radius: var(--vf-radius);

  --vf-messages-bg: transparent;
  --vf-messages-border-color: var(--vf-border-success);
  --vf-messages-border-style: solid;
  --vf-messages-border-width: 0;
  --vf-messages-color: var(--vf-green);
  --vf-messages-font-size: 0.875rem;
  --vf-messages-padding: 0;
  --vf-messages-radius: var(--vf-radius);

  --vf-input-border-width-l: var(--vf-border-width-l);

  --vf-icon-font-size: 0.875rem;
  --vf-icon-group-color: inherit;
  --vf-icon-group-color-danger: var(--vf-color-danger);
  --vf-icon-group-width: 2.5rem;

  --vf-element-group-gutter-x: 0;
  --vf-element-group-gutter-y: 0.25rem;
  --vf-element-wrapper-padding: 0;

  /**
   * Semantic tokens
   * -------------------------------------------------------------------------- */
  --vf-icon-height: 0.75rem;
  --vf-icon-width: 0.75rem;

  /**
   * Primitives tokens
   * -------------------------------------------------------------------------- */
  --vf-space-1: 1rem;
  --vf-space-2: 2rem;
  --vf-space-3: 3rem;

  --vf-icon-loading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-dasharray='30.6 10.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

{
  /**
   * Element tokens
   * -------------------------------------------------------------------------- */
  choiceAlignedMargin: 'calc((1lh - ($choiceHeight + $choiceBorderWidthT)) / 2 + $inputPt) 0 0 0',
  choiceGutter: '0.375rem',

  choiceHeight: '1rem',
  choiceWidth: '1rem',

  choiceRingColor: '$brand',
  choiceRingColorDanger: '$brand',
  choiceRingOffset: '-1px',
  choiceRingShadow: 'none',
  choiceRingShadowDanger: 'none',
  choiceRingStyle: 'solid',
  choiceRingWidth: '1px',

  choiceBg: '$white',
  choiceBgChecked: '$brand',
  choiceBgCheckedDanger: '$brand',
  choiceBgCheckedDisabled: '$gray400',
  choiceBgDanger: '$white',
  choiceBgDisabled: '$bgDisabled',

  choiceBorderColor: '$gray300',
  choiceBorderColorChecked: '$brand',
  choiceBorderColorCheckedDanger: '$brand',
  choiceBorderColorCheckedDisabled: '$gray400',
  choiceBorderColorDanger: '$gray300',
  choiceBorderColorDisabled: '$borderDisabled',
  choiceBorderWidthB: '1px',
  choiceBorderWidthL: '1px',
  choiceBorderWidthR: '1px',
  choiceBorderWidthT: '1px',
  choiceRadius: '$radiusSm',

  choiceShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0)',

  choiceColor: 'inherit',
  choiceIconColor: '$white',
  choiceIconColorDanger: '$white',
  choiceIconColorDisabled: '$white',

  choiceIconChecked: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")",
  choiceIconSelected: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3.5'/%3e%3c/svg%3e\")",

  /**
   * Shared element layout tokens
   * -------------------------------------------------------------------------- */
  elementLineColor: '$gray300',

  labelFontSize: '1rem',
  labelFontWeight: '600',
  labelGroupHPadding: 'calc($py + $borderWidthT) 0 0 0',
  labelGroupVPadding: '0 0 0.375rem 0',

  requiredBg: 'transparent',
  requiredColor: 'inherit',
  requiredContent: "'*'",
  requiredH: 'auto',
  requiredIcon: 'none',
  requiredW: 'auto',

  helpBg: 'transparent',
  helpBorderColor: 'transparent',
  helpBorderStyle: 'solid',
  helpBorderWidth: '0',
  helpColor: '$textSoft',
  helpFontSize: '0.875rem',
  helpPadding: '0',
  helpRadius: '$radius',

  descriptionBg: 'transparent',
  descriptionBorderColor: 'transparent',
  descriptionBorderStyle: 'solid',
  descriptionBorderWidth: '0',
  descriptionColor: '$textSoft',
  descriptionFontSize: '0.875rem',
  descriptionPadding: '0',
  descriptionRadius: '$radius',

  errorsBg: 'transparent',
  errorsBorderColor: 'transparent',
  errorsBorderStyle: 'solid',
  errorsBorderWidth: '0',
  errorsColor: '$red',
  errorsFontSize: '0.875rem',
  errorsPadding: '0',
  errorsRadius: '$radius',

  messagesBg: 'transparent',
  messagesBorderColor: '$borderSuccess',
  messagesBorderStyle: 'solid',
  messagesBorderWidth: '0',
  messagesColor: '$green',
  messagesFontSize: '0.875rem',
  messagesPadding: '0',
  messagesRadius: '$radius',

  inputBorderWidthL: '$borderWidthL',

  iconFontSize: '0.875rem',
  iconGroupColor: 'inherit',
  iconGroupColorDanger: '$colorDanger',
  iconGroupWidth: '2.5rem',

  elementGroupGutterX: '0',
  elementGroupGutterY: '0.25rem',
  elementWrapperPadding: '0',

  /**
   * Semantic tokens
   * -------------------------------------------------------------------------- */
  iconHeight: '0.75rem',
  iconWidth: '0.75rem',

  /**
   * Primitives tokens
   * -------------------------------------------------------------------------- */
  space1: '1rem',
  space2: '2rem',
  space3: '3rem',

  iconLoading: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-dasharray='30.6 10.2' stroke-linecap='round'/%3E%3C/svg%3E\")",
}