Pikas UI

Pikas UI

@pikas-ui/radio-group

This package contains a radio group component that can be used to select one option from a list of options.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/radio-group
yarn add @pikas-ui/radio-group
pnpm add @pikas-ui/radio-group

Usage

RadioGroup

This component is used to create a radio group.

*

Eu est labore ea laborum laborum mollit non minim eu commodo.

import { RadioGroup } from '@pikas-ui/radio-group';

const Example: React.FC = () => {
  return (
    <RadioGroup
      label="Radio Group label"
      description="Eu est labore ea laborum laborum mollit non minim eu commodo."
      required
      id="Radio Group"
      data={[
        {
          label: 'Radio Group item 1',
          value: 'radio-group-item-1',
        },
        {
          label: 'Radio Group item 2',
          value: 'radio-group-item-2',
        },
        {
          label: 'Radio Group item 3',
          value: 'radio-group-item-3',
          disabled: true,
        },
      ]}
    />
  );
};

Props

PropDescriptionTypeDefault
dataThe data of the radio groupRadioGroupItem[]required
idThe id of the radio groupstring-
labelThe label of the radio groupReactNode or string-
textErrorThe error text of the radio groupstring-
fontSizeThe font size of the radio groupPikasFontSizeem-base
classNameThe class name of the radio groupstring-
descriptionThe description of the radio groupstring-
cssThe css of the radio groupRadioGroupCSS-
requiredThe required of the radio groupboolean-
infoThe info of the radio groupReactNode-
defaultValueThe default value of the radio groupstring-
valueThe value of the radio groupstring-
onChangeThe onChange of the radio group(value: string) => Promise<void> or void-
disabledThe disabled of the radio groupboolean-
nameThe name of the radio groupstring-
orientationThe orientation of the radio groupRadioGroupOrientation"vertical"
dirThe direction of the radio groupRadioGroupDirection"ltr"
loopThe loop of the radio groupbooleanfalse

RadioGroupImage

This component is used to create a radio group with images.

*

Eu est labore ea laborum laborum mollit non minim eu commodo.

import { RadioGroupImage } from '@pikas-ui/radio-group';

const Example: React.FC = () => {
  return (
    <RadioGroupImage
      label="Radio Group Image label"
      description="Eu est labore ea laborum laborum mollit non minim eu commodo."
      required
      id="Radio Group Image"
      data={[
        {
          label: 'Radio Group Image item 1',
          value: 'Radio Group Image item 1',
          image: 'https://picsum.photos/200/300',
        },
        {
          label: 'Radio Group Image item 2',
          value: 'Radio Group Image item 2',
          image: 'https://picsum.photos/200/300',
        },
        {
          label: 'Radio Group Image item 3',
          value: 'Radio Group Image item 3',
          image: 'https://picsum.photos/200/300',
          disabled: true,
        },
      ]}
    />
  );
};

Props

PropDescriptionTypeDefault
dataThe data of the radio groupRadioGroupImageItem[]required
idThe id of the radio groupstring-
labelThe label of the radio groupReactNode or string-
textErrorThe error text of the radio groupstring-
fontSizeThe font size of the radio groupPikasFontSizeem-base
classNameThe class name of the radio groupstring-
descriptionThe description of the radio groupstring-
cssThe css of the radio groupRadioGroupImageCSS-
requiredThe required of the radio groupboolean-
infoThe info of the radio groupReactNode-
defaultValueThe default value of the radio groupstring-
valueThe value of the radio groupstring-
onChangeThe onChange of the radio group(value: string) => Promise<void> or void-
disabledThe disabled of the radio groupboolean-
nameThe name of the radio groupstring-
orientationThe orientation of the radio groupRadioGroupOrientation"vertical"
dirThe direction of the radio groupRadioGroupDirection"ltr"
loopThe loop of the radio groupbooleanfalse
borderRadiusThe border radius of the radio groupPikasRadius"md"
imageWidthThe image width of the radio groupnumber or string40
imageHeightThe image height of the radio groupnumber or string40

Contributing

This documentation can be edited on GitHub here