Checkbox

Базовый компонент чекбокса. Basic checkbox component.

Import Permalink to "Import"

import ProximaCheckbox from 'proxima-vue/checkbox';

Playground Permalink to "Playground"

Check me

import { ref } from 'vue';
import ProximaCheckbox from 'proxima-vue/checkbox';

const value = ref(true);

html

<ProximaCheckbox
  label="Check me"
  v-model="value"
/>

Custom values Permalink to "Custom values"

Вы можете указать любые true и false значения: You can specify any true and false values:

Check me

value: 'yes'

import { ref } from 'vue';
import ProximaCheckbox from 'proxima-vue/checkbox';

const value = ref('yes');

html

<ProximaCheckbox
  label="Check me"
  true-value="yes"
  false-value="no"
  v-model="value"
/>

Skeleton Permalink to "Skeleton"

Режим плейсхолдера во время загрузки: Placeholder mode on loading:

Атрибут data‑ghost требует The attribute data‑ghost requires ghost.css

Check me

html

<div data-ghost="true" inert>
  <ProximaCheckbox
    label="Check me"
  />
</div>

Label link Permalink to "Label link"

Agree to the Terms of Service

html

<ProximaCheckbox>
  <template #label>
    Agree to the <a href="/" @click.stop>Terms of Service</a>
  </template>
</ProximaCheckbox>

Indeterminate Permalink to "Indeterminate"

Специальный пропс для состояния indeterminate: A special prop for indeterminate state:

Check all

One

Two

import { ref, unref, computed } from 'vue';
import ProximaCheckbox from 'proxima-vue/checkbox';

const valueOne = ref(true);
const valueTwo = ref(false);

const isFullSelection = computed(() => unref(valueOne) && unref(valueTwo));
const isPartSelection = computed(() => unref(valueOne) !== unref(valueTwo));

const toggleSelection = (state) => {
  valueOne.value = state;
  valueTwo.value = state;
};

html

<ProximaCheckbox
  label="Check all"
  :model-value="isFullSelection"
  :indeterminate="isPartSelection"
  @update:modelValue="toggleSelection"
/>

<ProximaCheckbox
  label="One"
  v-model="valueOne"
/>

<ProximaCheckbox
  label="Two"
  v-model="valueTwo"
/>

Accessibility Permalink to "Accessibility"

Компонент использует radio и checkbox поля, они скрыты визуально, но доступны для вспомогательных технологий, для описания поля используется label, его также можно визуально скрыть: The component uses radio and checkbox inputs, they are hidden visually, but are available for assistive technologies, a label is used to describe the input, it can also be visually hidden:

Для работы visually‑hidden требуется The prop visually‑hidden requires accessibility.css

html

<ProximaCheckbox
  label="Label only for assistive technologies"
  label-visually-hidden
/>

Если же требуется расширенное описание, то можно использовать пропс describedby, который добавляет полю атрибут aria‑describedby: If you need an extended description, you can use the describedby prop, which adds aria‑describedby attribute to the input:

html

<ProximaCheckbox
  label="Check me"
  describedby="my-hidden-description"
/>

<p id="my-hidden-description" hidden>
  The extended description for assistive technologies can be hidden
</p>

BEM Permalink to "BEM"

Блок компонента checkbox, модификаторы (создаются автоматически на основе пропсов): Component block checkbox, modifiers (automatically created based on props):

checkbox_focused
checkbox_checked checkbox_unchecked
checkbox_indeterminate checkbox_required
checkbox_enabled checkbox_disabled
checkbox_has_label checkbox_has_effect
checkbox_type_checkbox checkbox_type_radio
checkbox_view_plain checkbox_view_outline checkbox_view_line
checkbox_shadow_none checkbox_shadow_soft
checkbox_effect_none checkbox_effect_ripple checkbox_effect_pulse
checkbox_size_xxs checkbox_size_xs checkbox_size_s checkbox_size_normal checkbox_size_m checkbox_size_l checkbox_size_xl checkbox_size_xxl
checkbox_theme_[name]

CSS Permalink to "CSS"

Слой компонента @layer proxima.checkbox, также вы можете гибко cтилизовать компонент через кастомные свойства: Component layer @layer proxima.checkbox, also you can style the component flexibly through custom properties:

css

--checkbox-accent-color: var(--app-accent-color);

--checkbox-gap: calc(var(--checkbox-size) / 2.5);
--checkbox-content-border-radius: calc(var(--checkbox-size) / 4);
--checkbox-transition: background-color 200ms, border-color 200ms;
--checkbox-indicator-z-index: 1;

/* Background */
--checkbox-background: var(--app-field-background);
--checkbox-view-line-background: transparent;

/* Border */
--checkbox-border-width: 1.5px;
--checkbox-border-style: solid;
--checkbox-border-radius: inherit;
--checkbox-border-color: var(--app-field-border-color);

/* Effect */
--checkbox-effect-z-index: 4;
--checkbox-effect-ripple-color: #000;
--checkbox-effect-pulse-color: var(--checkbox-accent-color);

/* Shadow */
--checkbox-box-shadow-soft-size: 0 0.0625rem 0.25rem;
--checkbox-box-shadow-soft-color: rgba(0, 0, 0, 0.1);
--checkbox-view-line-box-shadow-soft-size: 0;

/* Label */
--checkbox-label-line-height: 1.3;
--checkbox-label-color: var(--app-label-color);
--checkbox-label-align-self: center;

/* Icon */
--checkbox-icon-stroke-linecap: round;
--checkbox-icon-stroke-linejoin: round;
--checkbox-icon-stroke-dasharray: 15;
--checkbox-icon-stroke-dashoffset: 15px;
--checkbox-icon-tick-transition: stroke-dashoffset 300ms ease-in-out;

/*
  States
*/

/* Checked */
--checkbox-checked-border-color: var(--checkbox-accent-color);
--checkbox-checked-icon-color: var(--checkbox-accent-color);

--checkbox-view-plain-checked-background: var(--checkbox-accent-color);
--checkbox-view-plain-checked-icon-color: #fff;

/* Hover */
--checkbox-hover-border-color: var(--checkbox-accent-color);

/* Focus */
--checkbox-focus-border-color: var(--checkbox-accent-color);

/* Disabled */
--checkbox-disabled-opacity: var(--app-disabled-opacity);

/* Focus highlight */
--checkbox-highlight-offset: var(--app-highlight-offset);
--checkbox-highlight-style: var(--app-highlight-style);
--checkbox-highlight-size: var(--app-highlight-size);
--checkbox-highlight-color: var(--app-highlight-color);

/* Tab focus outline */
--checkbox-outline-offset: var(--app-outline-offset);
--checkbox-outline-size: var(--app-outline-size);
--checkbox-outline-style: var(--app-outline-style);
--checkbox-outline-color: var(--app-outline-color);

/*
  Sizes
*/

--checkbox-size-xxs: 0.875rem;
--checkbox-padding-xxs: 0.0625rem;
--checkbox-label-font-size-xxs: 0.75rem;
--checkbox-icon-stroke-width-xxs: 2.5;

--checkbox-size-xs: 1rem;
--checkbox-padding-xs: 0.0625rem;
--checkbox-label-font-size-xs: 0.8125rem;
--checkbox-icon-stroke-width-xs: 2.5;

--checkbox-size-s: 1.125rem;
--checkbox-padding-s: 0.125rem;
--checkbox-label-font-size-s: 0.875rem;
--checkbox-icon-stroke-width-s: 2.5;

/* Normal */
--checkbox-size: 1.25rem;
--checkbox-padding: 0.125rem;
--checkbox-label-font-size: 0.875rem;
--checkbox-icon-stroke-width: 2.5;

--checkbox-size-m: 1.375rem;
--checkbox-padding-m: 0.125rem;
--checkbox-label-font-size-m: 1rem;
--checkbox-icon-stroke-width-m: 2.25;

--checkbox-size-l: 1.5rem;
--checkbox-padding-l: 0.125rem;
--checkbox-label-font-size-l: 1.125rem;
--checkbox-icon-stroke-width-l: 2;

--checkbox-size-xl: 1.75rem;
--checkbox-padding-xl: 0.125rem;
--checkbox-label-font-size-xl: 1.25rem;
--checkbox-icon-stroke-width-xl: 2;

--checkbox-size-xxl: 2rem;
--checkbox-padding-xxl: 0.125rem;
--checkbox-label-font-size-xxl: 1.25rem;
--checkbox-icon-stroke-width-xxl: 2;

/*
  Flags (0 or 1, based on props)
*/

--checkbox-has-effect: 0;
--checkbox-is-radio: 0;

--checkbox-is-view-line: 0;
--checkbox-is-view-outline: 0;
--checkbox-is-view-plain: 0;

--checkbox-is-checked: 0;
--checkbox-is-unchecked: 0;
--checkbox-is-indeterminate: 0;
--checkbox-is-disabled: 0;

--checkbox-is-focus: 0;
--checkbox-is-hover: 0; /* ! */

/*
  [!] Available for .checkbox__content not on .checkbox
*/

Theme Permalink to "Theme"

Используя кастомные свойства и специальный пропс theme можно легко создавать свои темы: By using custom properties and the prop theme, you can easily create your own themes:

Check me

html

<ProximaCheckbox
  label="Check me"
  theme="bright"
/>

css

.checkbox_theme_bright {
  --checkbox-label-color: #42b883;
  --checkbox-accent-color: #28b236;
}

Locale Permalink to "Locale"

Компонент использует токены локализации: The component uses localization tokens:

{
  checkboxRequired: "The checkbox must be checked",
}

Props Permalink to "Props"

interface ProximaCheckboxProps {
  id?: string
  type?: 'checkbox' | 'radio'
  inputAttrs?: InputHTMLAttributes
  trueValue?: any
  falseValue?: any
  modelValue?: any
  label?: string
  labelVisuallyHidden?: boolean
  describedby?: string
  disabled?: boolean
  required?: boolean
  indeterminate?: boolean
  view?: 'plain' | 'outline' | 'line'
  size?: ProximaSize
  shadow?: ProximaShadow
  effect?: ProximaClickEffect
  theme?: string
}

Events Permalink to "Events"

html

<ProximaCheckbox
  @update:modelValue="onCheckboxUpdate"
  @focus="onCheckboxFocus"
  @blur="onCheckboxBlur"
/>

const onCheckboxUpdate = (modelValue) => {};
const onCheckboxFocus = (event) => {};
const onCheckboxBlur = (event) => {};

type Emits = {
  'update:modelValue': (modelValue: any) => void
  'focus': (event: FocusEvent) => void
  'blur': (event: FocusEvent) => void
}

Slots Permalink to "Slots"

html

<ProximaCheckbox>
  <template #prepend="slotProps">
    you code (prepend to content)
  </template>

  <template #icon="slotProps">
    you code (replaced icon)
  </template>

  <template #label="slotProps">
    you code (replaced label text)
  </template>
</ProximaCheckbox>

type SlotProps = {
  id: string
  hasEffect: boolean
  hasLabel: boolean
  isIndeterminate: boolean
  isMultiple: boolean
  isChecked: boolean
  isFocused: boolean
  isValid: boolean
  errorMessage: string
  value: any
  focus: () => void
  blur: () => void
}

Expose Permalink to "Expose"

html

<ProximaCheckbox ref="checkbox" />

import { ref, unref, onMounted } from 'vue';
import ProximaCheckbox from 'proxima-vue/checkbox';

const checkbox = ref({} as InstanceType<typeof ProximaCheckbox>);

onMounted(() => {
  unref(checkbox).checkFocus(); // false
  unref(checkbox).focus();
  unref(checkbox).checkFocus(); // true
});

type ProximaCheckboxInstance = {
  getErrorMessage: () => string
  getContainer: () => HTMLDivElement | null
  getElement: () => HTMLInputElement | null
  getValue: () => any
  getId: () => string
  checkValidity: () => boolean
  checkFocus: () => boolean
  checked: () => boolean
  focus: () => void
  blur: () => void
}

View source on GitHub