Radio

The Radio component is a simple radio input that allows users to select a single option from a list of options.

Components:

Radio CustomRadio RadioGroup

Type

Components

import

import { Radio } from '@pillar-ui/core'

Usage

import { Radio } from '@pillar-ui/core'
<Radio />

Radio

Children

import { Button, Flex, Paper, Radio, Text } from '@pillar-ui/core'
import Link from 'next/link'

export const RadioChildren = () => {
  return (
    <Flex direction="col" gap="6">
      <Radio>Option 1</Radio>
      <Radio>
        <Text weight="6">Nice to Meet You</Text>
        <Text size="3" color="b" low>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </Text>
      </Radio>
      <Radio>
        <Flex gap="2">
          <Text as="span" weight="6">
            Remember Me |
          </Text>
          <Text as={Link} href="#">
            Sign Up
          </Text>
        </Flex>
      </Radio>
    </Flex>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
import { Radio } from '@pillar-ui/core'

export const RadioColor = () => {
  return (
    <>
      <Radio color="d" name="danger">
        Hello World
      </Radio>
      <Radio color="su" name="success">
        Hello World
      </Radio>
      <Radio color="w" name="warning">
        Hello World
      </Radio>
      <Radio color="p" name="primary">
        Hello World
      </Radio>
      <Radio color="i" name="info">
        Hello World
      </Radio>
      <Radio color="se" name="secondary">
        Hello World
      </Radio>
      <Radio color="b" name="background">
        Hello World
      </Radio>
    </>
  )
}

DefaultChecked

Default

false

Type

boolean
import { Radio } from '@pillar-ui/core'

export const RadioDefaultChecked = () => {
  return (
    <>
      <Radio defaultChecked name="d" color="d">
        Hello world
      </Radio>
      <Radio defaultChecked name="su" color="su">
        Hello world
      </Radio>
      <Radio defaultChecked name="w" color="w">
        Hello world
      </Radio>
      <Radio defaultChecked name="p" color="p">
        Hello world
      </Radio>
      <Radio defaultChecked name="se" color="se">
        Hello world
      </Radio>
      <Radio defaultChecked name="b" color="b">
        Hello world
      </Radio>
      <Radio defaultChecked name="i" color="i">
        Hello world
      </Radio>
    </>
  )
}

Variant

Default

solid

Type

'solid' | 'outline' | 'soft' | 'mixed'
import { Radio } from '@pillar-ui/core'

export const RadioVariant = () => {
  return (
    <>
      <Radio name="default.se">Hello World</Radio>
      <Radio variant="outline" name="outline.sec2">
        Hello World
      </Radio>
      <Radio variant="soft" name="soft.sec3">
        Hello World
      </Radio>
      <Radio variant="mixed" name="mixed.sec3">
        Hello World
      </Radio>
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Radio } from '@pillar-ui/core'

export const RadioSize = () => {
  return (
    <>
      <Radio size="1" name="1">
        Hello World
      </Radio>
      <Radio size="2" name="2">
        Hello World
      </Radio>
      <Radio size="3" name="3">
        Hello World
      </Radio>
      <Radio size="4" name="4">
        Hello World
      </Radio>
      <Radio size="5" name="5">
        Hello World
      </Radio>
      <Radio size="6" name="6">
        Hello World
      </Radio>
      <Radio size="7" name="7">
        Hello World
      </Radio>
      <Radio size="8" name="8">
        Hello World
      </Radio>
      <Radio size="9" name="9">
        Hello World
      </Radio>
    </>
  )
}

Disabled

import { Radio, Flex } from '@pillar-ui/core'

export const RadioDisabled = () => {
  return (
    <>
      <Flex gap="4" items="center">
        <Radio disabled name="hello" color="d">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="su">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="w">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="p">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="se">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="b">
          Hello world
        </Radio>
      </Flex>
      <Flex gap="4" items="center">
        <Radio disabled defaultChecked name="hello" color="d">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="su">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="w">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="p">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="se">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="b">
          Hello world
        </Radio>
      </Flex>
    </>
  )
}

RadioGroup

RadioGroup groups radio buttons, ensuring only one can be selected. It shares common properties across all buttons within it, reducing code repetition and simplifying management.

Color
import { Radio, RadioGroup } from '@pillar-ui/core'
import React from 'react'

export const RadioGroupBase = () => {
  return (
    <RadioGroup legend="Color" variant="outline" name="color" color="se" size="4">
      <Radio value="red">Red</Radio>
      <Radio value="green">Green</Radio>
      <Radio value="blue">Blue</Radio>
      <Radio value="yellow">Yellow</Radio>
      <Radio value="orange">Orange</Radio>
      <Radio value="purple">Purple</Radio>
    </RadioGroup>
  )
}

Radio Group Direction

Default

col

Type

'col' | 'row'
Color
Color
import { Flex, Radio, RadioGroup } from '@pillar-ui/core'
import React from 'react'

export const RadioGroupDirection = () => {
  return (
    <Flex direction="col" gap="4">
      <RadioGroup legend="Color" direction="row" variant="outline" name="row.color" color="se" size="4">
        <Radio value="red">Red</Radio>
        <Radio value="green">Green</Radio>
        <Radio value="blue">Blue</Radio>
        <Radio value="yellow">Yellow</Radio>
        <Radio value="orange">Orange</Radio>
        <Radio value="purple">Purple</Radio>
      </RadioGroup>
      <RadioGroup legend="Color" variant="outline" name="col.color" color="i" size="4">
        <Radio value="red">Red</Radio>
        <Radio value="green">Green</Radio>
        <Radio value="blue">Blue</Radio>
        <Radio value="yellow">Yellow</Radio>
        <Radio value="orange">Orange</Radio>
        <Radio value="purple">Purple</Radio>
      </RadioGroup>
    </Flex>
  )
}

CustomRadio

Choose Your Best option
import { Avatar, Badge, Chips, CustomRadio, Flex, RadioGroup, Text } from '@pillar-ui/core'
import React from 'react'

interface UserProps {
  online?: boolean
  name?: string
  email?: string
  job?: string
}

const User = ({ online = false, name, email, job }: UserProps) => {
  return (
    <Flex items="center" justify="between" gap="5">
      <Flex gap="3">
        <Avatar title="John Doe" size="4" />
        <div>
          <Text size="4" weight="5">
            {name}
          </Text>
          <Text size="3" color="b" low>
            {email}
          </Text>
        </div>
      </Flex>
      <Flex gap="2" items="center">
        <Chips>{online ? 'Online' : 'Offline'}</Chips>
        <Chips color="b" variant="soft">
          {job}
        </Chips>
      </Flex>
    </Flex>
  )
}

export const CustomRadioAdvanced = () => {
  return (
    <RadioGroup legend="Choose Your Best option" name="hello" direction="row">
      <CustomRadio>
        <User name="John Doe" email="john@doe.com" job="AI engineer" online />
      </CustomRadio>
      <CustomRadio>
        <User name="Hamza Miloud" email="hamza@gmail.com" job="Frontend Developer" online={false} />
      </CustomRadio>
    </RadioGroup>
  )
}

Custom Radio Direction

Default

col

Type

'col' | 'row'
Delivery Method
Delivery Method
import { CustomRadio, Flex, Paper, RadioGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'

const RadioCard = ({ title, price, deliveryTime }: any) => {
  return (
    <Paper flow="3">
      <Paper flow="1">
        <Text size="5" weight="5" leading="1">
          {title}
        </Text>
        <Text color="b" low>
          {deliveryTime}
        </Text>
      </Paper>
      <Flex gap="1" items="center">
        <Dollar width="20" />
        <Text weight="6" size="4">
          {price}
        </Text>
      </Flex>
    </Paper>
  )
}

export const CustomRadioDirection = () => {
  return (
    <>
      <RadioGroup color="w" legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio>
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
      <RadioGroup color="se" legend="Delivery Method" direction="col" name="delivery">
        <CustomRadio>
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
    </>
  )
}

Custom Radio Color

Delivery Method
import { CustomRadio, Flex, Paper, RadioGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'

const RadioCard = ({ title, price, deliveryTime }: any) => {
  return (
    <Paper flow="3">
      <Paper flow="1">
        <Text size="5" weight="5" leading="1">
          {title}
        </Text>
        <Text color="b" low>
          {deliveryTime}
        </Text>
      </Paper>
      <Flex gap="1" items="center">
        <Dollar width="20" />
        <Text weight="6" size="4">
          {price}
        </Text>
      </Flex>
    </Paper>
  )
}

export const CustomRadioColor = () => {
  return (
    <Flex direction="col" gap="4">
      <RadioGroup legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio color="p">
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio color="w">
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio color="d">
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
        <CustomRadio color="su">
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
        <CustomRadio color="se">
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
        <CustomRadio color="i">
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
    </Flex>
  )
}

Custom Radio Variant

Default

solid

Type

'solid' | 'outline' | 'soft' | 'mixed'
Choose Your Best option
import { CustomRadio, RadioGroup, Text } from '@pillar-ui/core'
import React from 'react'

export const CustomRadioVariant = () => {
  return (
    <RadioGroup legend="Choose Your Best option" name="hello" direction="row">
      <CustomRadio variant="soft">
        <Text>Solid</Text>
      </CustomRadio>
      <CustomRadio variant="outline">
        <Text>Outline</Text>
      </CustomRadio>
      <CustomRadio variant="solid">
        <Text>Soft</Text>
      </CustomRadio>
      <CustomRadio variant="mixed">
        <Text>Mixed</Text>
      </CustomRadio>
    </RadioGroup>
  )
}

indicator

Default

true

Type

boolean
Delivery Method
import { CustomRadio, Flex, Paper, RadioGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'

const RadioCard = ({ title, price, deliveryTime }: any) => {
  return (
    <Paper flow="3">
      <Paper flow="1">
        <Text size="5" weight="5" leading="1">
          {title}
        </Text>
        <Text color="b" low>
          {deliveryTime}
        </Text>
      </Paper>
      <Flex gap="1" items="center">
        <Dollar width="20" />
        <Text weight="6" size="4">
          {price}
        </Text>
      </Flex>
    </Paper>
  )
}

export const CustomRadioNoIndicator = () => {
  return (
    <Flex direction="col" gap="4">
      <RadioGroup legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio indicator={false}>
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio indicator={false}>
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio indicator={false}>
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
    </Flex>
  )
}

reversed

Default

true

Type

boolean
Delivery Method
import { CustomRadio, Flex, Paper, RadioGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'

const RadioCard = ({ title, price, deliveryTime }: any) => {
  return (
    <Paper flow="3">
      <Paper flow="1">
        <Text size="5" weight="5" leading="1">
          {title}
        </Text>
        <Text color="b" low>
          {deliveryTime}
        </Text>
      </Paper>
      <Flex gap="1" items="center">
        <Dollar width="20" />
        <Text weight="6" size="4">
          {price}
        </Text>
      </Flex>
    </Paper>
  )
}

export const CustomRadioReversed = () => {
  return (
    <Flex direction="col" gap="4">
      <RadioGroup legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio defaultChecked reversed color="w">
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio color="w">
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
      </RadioGroup>
    </Flex>
  )
}

fluid

Default

true

Type

boolean
Delivery Method
Delivery Method
import { CustomRadio, Flex, Paper, RadioGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'

const RadioCard = ({ title, price, deliveryTime }: any) => {
  return (
    <Paper flow="3">
      <Paper flow="1">
        <Text size="5" weight="5" leading="1">
          {title}
        </Text>
        <Text color="b" low>
          {deliveryTime}
        </Text>
      </Paper>
      <Flex gap="1" items="center">
        <Dollar width="20" />
        <Text weight="6" size="4">
          {price}
        </Text>
      </Flex>
    </Paper>
  )
}

export const CustomRadioFluid = () => {
  return (
    <>
      <RadioGroup fluid legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio>
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
      <RadioGroup fluid reversed legend="Delivery Method" direction="row" name="delivery">
        <CustomRadio>
          <RadioCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Express" price="35.00" deliveryTime="3-6 business days" />
        </CustomRadio>
        <CustomRadio>
          <RadioCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
        </CustomRadio>
      </RadioGroup>
    </>
  )
}