RadioGroup

Import Permalink to "Import"

import ProximaRadioGroup from 'proxima-vue/checkbox/radiogroup';

Playground Permalink to "Playground"

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

const value = ref('');
const options = ['Annually', 'Quarterly', 'Monthly', 'Weekly', 'Daily'];

<ProximaRadioGroup
  :options="options"
  label="Send notifications"
  v-model="value"
/>

Options Permalink to "Options"

В компонент можно передать простой массив строк или чисел: You can simply pass an array of strings or numbers:

const simpleOptions = ['one', 'two', 'three']; // or [1, 2, 3]

Или массив объектов, где можно указать атрибуты поля, лейбл, заблокировать определенный вариант: Or an array of objects where you can specify field attributes, a label, or disable a certain option:

const complexOptions = [
  { label: 'one', value: '1' },
  { label: 'two', value: '2' },
  { label: 'three', value: '3', disabled: true },
];

const fullOptionExample = {
  value: 1,
  label: 'one',
  labelVisuallyHidden: true,
  inputAttrs: { 'data-id': 'value' },
  describedby: 'my-description',
  disabled: true,
};

interface ProximaRadioOption {
  value: any
  label?: string
  labelVisuallyHidden?: boolean
  inputAttrs?: ProximaDynamicAttrs
  describedby?: string
  disabled?: boolean
  theme?: string
}

Multiple Permalink to "Multiple"

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

const value = ref([]);

<ProximaRadioGroup
  :options="['Pear', 'Apple', 'Orange']"
  v-model="value"
/>

Skeleton Permalink to "Skeleton"

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

<div data-ghost="true" inert>
  <ProximaRadioGroup
    label="Select item"
    :options="['one', 'two', 'three']"
  />
</div>

Accessibility Permalink to "Accessibility"

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

<ProximaRadioGroup
  label="Heading to identify the group"
  label-visually-hidden
/>

Если же требуется расширенное описание для скринридеров, то можно использовать атрибут If you need an extended description for screen readers, you can use the attribute aria-describedby

BEM Permalink to "BEM"

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

• radiogroup_focused
• radiogroup_enabled radiogroup_disabled
• radiogroup_indeterminate radiogroup_required radiogroup_multiple
• radiogroup_has_label
• radiogroup_label_above radiogroup_label_aside
• radiogroup_size_xxs radiogroup_size_xs radiogroup_size_s radiogroup_size_normal radiogroup_size_m radiogroup_size_l radiogroup_size_xl radiogroup_size_xxl
• radiogroup_theme_[name]

CSS Permalink to "CSS"

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

--radiogroup-checkbox-label-color: inherit;
--radiogroup-item-flex: 0 0 100%;

/* Header */
--radiogroup-header-display: block;
--radiogroup-header-padding-x: 0;
--radiogroup-header-margin-y-end:
  var(--radiogroup-label-font-size);

/* Label */
--radiogroup-label-color: var(--app-label-color);
--radiogroup-label-cursor: pointer;
--radiogroup-label-line-height: 1.2;
--radiogroup-label-letter-spacing: normal;

--radiogroup-label-aside-width-multiplier: 10;
--radiogroup-label-aside-width: calc(
  var(--radiogroup-label-font-size) *
  var(--radiogroup-label-aside-width-multiplier)
);

/*
  Sizes
*/

--radiogroup-gap-xxs: 0.75rem;
--radiogroup-label-font-size-xxs: 0.75rem;

--radiogroup-gap-xs: 0.875rem;
--radiogroup-label-font-size-xs: 0.75rem;

--radiogroup-gap-s: 0.875rem;
--radiogroup-label-font-size-s: 0.875rem;

/* Normal */
--radiogroup-gap: 0.875rem;
--radiogroup-label-font-size: 0.875rem;

--radiogroup-gap-m: 1rem;
--radiogroup-label-font-size-m: 1rem;

--radiogroup-gap-l: 1.125rem;
--radiogroup-label-font-size-l: 1rem;

--radiogroup-gap-xl: 1.25rem;
--radiogroup-label-font-size-xl: 1.125rem;

--radiogroup-gap-xxl: 1.375rem;
--radiogroup-label-font-size-xxl: 1.25rem;


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

--radiogroup-is-label-above: 0;
--radiogroup-is-label-aside: 0;

Props Permalink to "Props"

interface ProximaRadioGroupProps {
  id?: string
  modelValue?: any
  options?: ProximaRadioOption[] | string[] | number[]
  label?: string
  labelPosition?: 'above' | 'aside'
  labelVisuallyHidden?: boolean
  disabled?: boolean
  required?: boolean
  indeterminate?: boolean
  view?: 'plain' | 'outline' | 'line'
  size?: ProximaSize
  shadow?: ProximaShadow
  effect?: ProximaClickEffect
  theme?: string
}

Events Permalink to "Events"

<ProximaRadioGroup
  @update:modelValue="onRadioGroupUpdate"
  @focus="onRadioGroupFocus"
  @blur="onRadioGroupBlur"
/>

const onRadioGroupUpdate = (modelValue) => {};
const onRadioGroupFocus = (event) => {};
const onRadioGroupBlur = (event) => {};

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

Slots Permalink to "Slots"

<ProximaRadioGroup>
  <template #group-prepend="slotProps">
    you code (prepend to inner)
  </template>

  <template #group-label="slotProps">
    you code (replaced label)
  </template>

  <template #group-header="slotProps">
    you code (append to header)
  </template>

  <template #group-content="slotProps">
    you code (append to content)
  </template>

  <template #group-append="slotProps">
    you code (append to inner)
  </template>

  <!-- Option slots -->

  <template #prepend="{ option, optionProps, ...slotProps }">
    you code (prepend to checkbox content)
  </template>

  <template #icon="{ option, optionProps, ...slotProps }">
    you code (replaced checkbox icon)
  </template>

  <template #label="{ option, optionProps, ...slotProps }">
    you code (replaced checkbox label)
  </template>
</ProximaRadioGroup>

type SlotProps = {
  id: string
  hasLabel: boolean
  hasHeader: boolean
  isValid: boolean
  isFocused: boolean
  isMultiple: boolean
  isDisabled: boolean
  firstCheckedIndex: number
  firstEnabledIndex: number
  options: ProximaRadioOption[]
  errorMessage: string
  value: any
  focus: () => void
  blur: () => void
}

Expose Permalink to "Expose"

<ProximaRadioGroup ref="radioGroup" />

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

const radioGroup = ref({} as InstanceType<typeof ProximaRadioGroup>);

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

type ProximaRadioGroupInstance = {
  getErrorMessage: () => string
  getContainer: () => HTMLFieldSetElement | null
  getValue: () => any
  getId: () => string
  getFirstCheckedElement: () => HTMLInputElement | null
  getFirstEnabledElement: () => HTMLInputElement | null
  checkValidity: () => boolean
  checkFocus: () => boolean
  focus: () => void
  blur: () => void
}