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.
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'
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
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'
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
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'
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
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
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
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>
</>
)
}