CheckboxGroup

Requires:
@ray-js/ray≥0.5.10

Description

A multi-select group composed of multiple Checkbox components. Use either options or children.

Props

PropertyTypeRequiredDefaultDescription
No-Option list; use either this or children.
childrenany | any[] | stringNo-Child nodes, typically multiple Checkbox components; use either this or options.
namestringNo-Form field name, used as the key on form submit
disabledbooleanNofalseWhether disabled
No-Triggered when the selection changes.
idstringNo-id
classNamestringNo-className
styleanyNo-style
No-onClick
No-onTouchStart
No-onTouchMove
No-onTouchCancel
No-onTouchEnd
No-onLongPress event callback, no longer trigger click event
slotDeprecatedstringNo-Mini program component slot identifier
↳ This property is only used in base Mini Program components and is not recommended in the React DSL.
No-Long press the trigger

Examples

Basic usage

import React from 'react';
import { CheckboxGroup, Label, Checkbox } from '@ray-js/ray';

export default function () {
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
  ];

  return (
    <CheckboxGroup onChange={(e) => console.log('Selected values:', e.detail.value)}>
      {options.map((item) => (
        <Label key={item.value}>
          <Checkbox value={item.value} />
          {item.label}
        </Label>
      ))}
    </CheckboxGroup>
  );
}

Driven by options data.

import React from 'react';
import { CheckboxGroup, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>Render with options:</Text>
      <CheckboxGroup
        name="fruits"
        disabled={false}
        options={[
          { label: 'Apple', value: 'apple', checked: true },
          { label: 'Banana', value: 'banana' },
          { label: 'Grape', value: 'grape', disabled: true },
        ]}
        onChange={(e) => console.log('Selected:', e.detail.value)}
      />
    </View>
  );
}