@headlessui/react#RadioGroup TypeScript Examples
The following examples show how to use
@headlessui/react#RadioGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SharingPermissions.tsx From ide with Mozilla Public License 2.0 | 5 votes |
|
export function RadioGroupContents<T>({
title,
value,
onChange,
options,
disabled,
lightMode,
}: {
title: string;
value: T | null;
onChange: (newVal: T) => void;
options: {
label: string;
value: T;
}[];
disabled?: boolean;
lightMode?: boolean;
}): JSX.Element {
return (
<RadioGroup value={value} onChange={onChange} disabled={disabled}>
<RadioGroup.Label
as="div"
className={classNames(
'font-medium mb-2',
lightMode ? 'text-white' : ''
)}
>
{title}
</RadioGroup.Label>
<div className="rounded-md space-y-2">
{options.map(setting => (
<RadioGroup.Option
key={setting.label}
value={setting.value}
className="relative flex items-center cursor-pointer focus:outline-none"
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked
? 'bg-indigo-600 border-transparent'
: 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-2 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked
? lightMode
? 'text-gray-200'
: 'text-gray-800'
: lightMode
? 'text-gray-400'
: 'text-gray-600',
'block text-sm font-medium'
)}
>
{setting.label}
</RadioGroup.Label>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
);
}
Example #2
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 5 votes |
|
InterlayRadioGroup = (): JSX.Element => {
const [selected, setSelected] = React.useState(PLANS[0]);
return (
<RadioGroup value={selected} onChange={setSelected}>
<RadioGroup.Label className='sr-only'>Server size</RadioGroup.Label>
<div className='space-y-4'>
{PLANS.map((item) => (
<RadioGroup.Option
key={item.name}
value={item}
className={({ active }) =>
clsx(
{
[clsx('ring-1', 'ring-offset-2', 'ring-indigo-500')]: active
},
'relative',
'block',
'rounded-lg',
'border',
'border-gray-300',
'bg-white',
'shadow-sm',
'px-6',
'py-4',
'cursor-pointer',
'hover:border-gray-400',
'sm:flex',
'sm:justify-between',
'focus:outline-none'
)
}
>
{({ checked }) => (
<>
<div className={clsx('flex', 'items-center')}>
<div className='text-sm'>
<RadioGroup.Label as='p' className={clsx('font-medium', 'text-gray-900')}>
{item.name}
</RadioGroup.Label>
<RadioGroup.Description as='div' className='text-gray-500'>
<p className='sm:inline'>
{item.ram} / {item.cpus}
</p>{' '}
<span className='hidden sm:inline sm:mx-1' aria-hidden='true'>
·
</span>{' '}
<p className='sm:inline'>{item.disk}</p>
</RadioGroup.Description>
</div>
</div>
<RadioGroup.Description
as='div'
className={clsx('mt-2', 'flex', 'text-sm', 'sm:mt-0', 'sm:block', 'sm:ml-4', 'sm:text-right')}
>
<div className={clsx('font-medium', 'text-gray-900')}>{item.price}</div>
<div className={clsx('ml-1', 'text-gray-500', 'sm:ml-0')}>/mo</div>
</RadioGroup.Description>
<div
className={clsx(
checked ? 'border-indigo-500' : 'border-transparent',
'absolute',
'-inset-px',
'rounded-lg',
'border-2',
'pointer-events-none'
)}
aria-hidden='true'
/>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
);
}
Example #3
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 5 votes |
|
InterlayDenimToggleButtonGroup = ({ className, ...rest }: PropsOf<typeof RadioGroup>): JSX.Element => (
<RadioGroup className={clsx('z-0', 'inline-flex', 'shadow-sm', 'rounded-md', className)} {...rest} />
)
Example #4
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 5 votes |
|
InterlayDenimToggleButtonGroupItem = ({
className,
children,
disabled = false,
value,
...rest
}: CustomInterlayDenimButtonGroupItemProps & InterlayButtonBaseProps): JSX.Element => {
return (
<RadioGroup.Option
as={InterlayButtonBase}
value={value}
type='button'
className={({ active, checked }) =>
clsx(
{
[clsx(
'focus:outline-none',
'focus:ring-2',
'focus:border-interlayDenim-300',
'focus:ring-interlayDenim-200',
'focus:ring-opacity-50'
)]: active
},
'border',
'border-interlayDenim-300',
'font-medium',
'shadow-sm',
{
[clsx('text-white', 'bg-interlayDenim-600', 'hover:bg-interlayDenim-700')]: checked
},
'first:rounded-l',
'last:rounded-r',
'px-4',
'py-2',
'text-sm',
'-ml-px',
className
)
}
disabled={disabled}
{...rest}
>
{children}
</RadioGroup.Option>
);
}
Example #5
| Source File: index.tsx From pagely with MIT License | 4 votes |
|
Page = () => {
let [integration, setIntegration] =
useState<'notion' | 'googleSheets' | 'github' | 'airtable'>('notion');
const [highlight, setHighlight] = useState<boolean>(true);
useEffect(() => {
setHighlight(false);
setTimeout(() => {
setHighlight(true);
}, 1);
}, [integration]);
return (
<div>
<DashboardNav />
<div className='max-w-5xl mx-auto'>
<h1 className='text-4xl font-bold'>Create a new Pagely website</h1>
<div className='mt-10'>
<h2 className='mt-5 text-2xl font-medium'>
I would like to make a website with{' '}
<span className='font-bold capitalize'>
<RoughNotation
type='box'
show={highlight}
color='rgba(55, 94, 241)'
animationDuration={600}
iterations={3}>
{integration === 'googleSheets' ? 'Google Sheets' : integration}
</RoughNotation>
</span>
</h2>
<RadioGroup value={integration} onChange={setIntegration}>
<RadioGroup.Option
value='notion'
className='max-w-md px-10 py-5 my-5 transition-all border border-blue-400 rounded-md shadow cursor-pointer focus:ring-4 focus:ring-offset-1 focus:outline-none focus:ring-blue-300'>
{({ checked }) => (
<span className={checked ? 'font-bold' : ''}>
<span className={checked ? 'opacity-100' : 'opacity-0'}>
<SiNotion className='relative inline-block mr-3 bottom-px' />{' '}
</span>
Notion
</span>
)}
</RadioGroup.Option>
<RadioGroup.Option
value='airtable'
className='max-w-md px-10 py-5 my-5 transition-all border border-blue-400 rounded-md shadow cursor-pointer focus:ring-4 focus:ring-offset-1 focus:outline-none focus:ring-blue-300'>
{({ checked }) => (
<span className={checked ? 'font-bold' : ''}>
<span className={checked ? 'opacity-100' : 'opacity-0'}>
<SiAirtable className='relative inline-block mr-3 bottom-px' />{' '}
</span>
Airtable{' '}
<span className='inline-block px-1 py-px mx-2 text-xs text-green-700 uppercase bg-green-200 border border-green-800 rounded-full'>
Coming soon
</span>
</span>
)}
</RadioGroup.Option>
<RadioGroup.Option
value='googleSheets'
className='max-w-md px-10 py-5 my-5 transition-all border border-blue-400 rounded-md shadow cursor-pointer focus:ring-4 focus:ring-offset-1 focus:outline-none focus:ring-blue-300'>
{({ checked }) => (
<span className={checked ? 'font-bold' : ''}>
<span className={checked ? 'opacity-100' : 'opacity-0'}>
<SiGooglesheets className='relative inline-block mr-3 bottom-px' />{' '}
</span>
Google Sheets{' '}
<span className='inline-block px-1 py-px mx-2 text-xs text-green-700 uppercase bg-green-200 border border-green-800 rounded-full'>
Coming soon
</span>
</span>
)}
</RadioGroup.Option>
<RadioGroup.Option
value='github'
className='max-w-md px-10 py-5 my-5 transition-all border border-blue-400 rounded-md shadow cursor-pointer focus:ring-4 focus:ring-offset-1 focus:outline-none focus:ring-blue-300'>
{({ checked }) => (
<span className={checked ? 'font-bold' : ''}>
<span className={checked ? 'opacity-100' : 'opacity-0'}>
<SiGithub className='relative inline-block mr-3 bottom-px' />{' '}
</span>
GitHub
</span>
)}
</RadioGroup.Option>
</RadioGroup>
</div>
<Link
href={`/new/${
integration === 'googleSheets' ? 'sheets' : integration
}`}>
<a className='inline-flex items-center justify-center py-2 mt-10 text-lg font-medium text-blue-600 border border-blue-300 rounded shadow-sm px-7 bg-blue-50 hover:bg-blue-100'>
Continue -{'>'}
</a>
</Link>
</div>
</div>
);
}
Example #6
| Source File: FestivalRegister.tsx From platform with MIT License | 4 votes |
|
RatingRadio = ({ potentialPlayer, setSelectedECFId }) => {
const [selected, setSelected] = useState("");
const handleSelected = (s) => {
setSelected(s);
setSelectedECFId(s);
};
return (
<RadioGroup value={selected} onChange={handleSelected}>
<RadioGroup.Label className="block text-sm font-medium text-blue-brand mb-2">
Quick ECF search{" "}
<span className="font-normal text-gray-500">(select if relevant)</span>
</RadioGroup.Label>
<div className="bg-white rounded-md -space-y-px max-h-60 overflow-y-scroll">
{potentialPlayer.map((player, playerIdx) => (
<RadioGroup.Option
key={playerIdx}
value={player.ECF_code}
className={({ checked }) =>
classNames(
playerIdx === 0 ? "rounded-tl-md rounded-tr-md" : "",
playerIdx === potentialPlayer.length - 1
? "rounded-bl-md rounded-br-md"
: "",
checked ? "bg-teal-50 border-teal-200 z-10" : "border-gray-200",
"relative border p-4 flex cursor-pointer focus:outline-none"
)
}
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked
? "bg-teal-600 border-transparent"
: "bg-white border-gray-300",
active ? "ring-2 ring-offset-2 ring-teal-500" : "",
"h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-3 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? "text-teal-900" : "text-gray-900",
"block text-sm font-medium"
)}
>
{player.full_name}
</RadioGroup.Label>
<RadioGroup.Description
as="span"
className={classNames(
checked ? "text-teal-700" : "text-gray-500",
"block text-sm"
)}
>
<div className="flex gap-2 w-fill text-blue-brand font-medium">
{player.club_name && (
<div>
Club:{" "}
<span className="font-normal">
{player.club_name}
</span>
</div>
)}
{player.category && (
<div>
Membership:{" "}
<span className="font-normal">{player.category}</span>
</div>
)}
{player.date_last_game && (
<div>
Last Game:{" "}
<span className="font-normal">
{moment(player.date_last_game).format("Do MMM YY")}
</span>
</div>
)}
</div>
</RadioGroup.Description>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
);
}
Example #7
| Source File: UserSettings.tsx From ide with Mozilla Public License 2.0 | 4 votes |
|
export default function UserSettings({
name,
onNameChange,
editorMode,
onEditorModeChange,
tabSize,
onTabSizeChange,
lightMode,
onLightModeChange,
}: {
name: string;
onNameChange: (name: string) => void;
editorMode: EditorMode;
onEditorModeChange: (mode: EditorMode) => void;
tabSize: number;
onTabSizeChange: (tabSize: number) => void;
lightMode: boolean;
onLightModeChange: (lightMode: boolean) => void;
}): JSX.Element {
return (
<div className="space-y-6">
<div>
<label htmlFor={`name`} className="block font-medium text-gray-700">
User Name
</label>
<div className="mt-1">
<input
type="text"
name={`name`}
id={`name`}
className="mt-0 block w-full px-0 pt-0 pb-1 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black text-sm"
value={name}
onChange={e => {
onNameChange(e.target.value);
}}
/>
</div>
</div>
<div>
<RadioGroup value={editorMode} onChange={onEditorModeChange}>
<RadioGroup.Label className="font-medium text-gray-800 mb-4">
Editor Mode
</RadioGroup.Label>
<div className="bg-white rounded-md space-x-4">
{EDITOR_MODES.map(setting => (
<RadioGroup.Option
key={setting}
value={setting}
className="relative inline-flex items-center cursor-pointer focus:outline-none"
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked
? 'bg-indigo-600 border-transparent'
: 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-2 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? 'text-gray-800' : 'text-gray-600',
'block text-sm font-medium'
)}
>
{setting}
</RadioGroup.Label>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
<div>
<RadioGroup value={tabSize} onChange={onTabSizeChange}>
<RadioGroup.Label className="font-medium text-gray-800 mb-4">
Tab Size
</RadioGroup.Label>
<div className="bg-white rounded-md space-x-4">
{[2, 4, 8].map(setting => (
<RadioGroup.Option
key={setting}
value={setting}
className="relative inline-flex items-center cursor-pointer focus:outline-none"
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked
? 'bg-indigo-600 border-transparent'
: 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-2 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? 'text-gray-800' : 'text-gray-600',
'block text-sm font-medium'
)}
>
{setting}
</RadioGroup.Label>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
<div>
<RadioGroup value={lightMode} onChange={onLightModeChange}>
<RadioGroup.Label className="font-medium text-gray-800 mb-4">
Theme
</RadioGroup.Label>
<div className="bg-white rounded-md space-x-4">
{[false, true].map(setting => (
<RadioGroup.Option
key={setting ? 'Light' : 'Dark'}
value={setting}
className="relative inline-flex items-center cursor-pointer focus:outline-none"
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked
? 'bg-indigo-600 border-transparent'
: 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-2 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? 'text-gray-800' : 'text-gray-600',
'block text-sm font-medium'
)}
>
{setting ? 'Light' : 'Dark'}
</RadioGroup.Label>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
</div>
);
}
