Toggle Group
A set of two-state buttons that can be toggled on or off.
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
preflight: true,
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
}),
],
include: ['./src/**/*.{js,jsx,ts,tsx}'],
jsxFramework: '__JS_FRAMEWORK__',
outdir: 'styled-system',
})
import { parkwindPlugin } from '@park-ui/tailwind-plugin'
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [parkwindPlugin],
parkUI: {
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
},
darkMode: ['class'],
}
export default config
A set of two-state buttons that can be toggled on or off.
import {
AlignCenterIcon,
AlignJustifyIcon,
AlignLeftIcon,
AlignRightIcon,
BoldIcon,
ItalicIcon,
UnderlineIcon,
} from 'lucide-react'
import { Stack } from 'styled-system/jsx'
import * as ToggleGroup from '~/components/ui/toggle-group'
export const Demo = (props: ToggleGroup.RootProps) => {
return (
<Stack
direction={props.orientation === 'horizontal' ? 'row' : 'column'}
gap="3"
borderRadius="l3"
borderWidth={props.variant === 'ghost' ? '1px' : '0'}
p={props.variant === 'ghost' ? '1' : '0'}
>
<ToggleGroup.Root multiple {...props}>
<ToggleGroup.Item value="bold" aria-label="Toggle Bold">
<BoldIcon />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle Italic">
<ItalicIcon />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline" aria-label="Toggle Underline">
<UnderlineIcon />
</ToggleGroup.Item>
</ToggleGroup.Root>
<ToggleGroup.Root defaultValue={['left']} {...props}>
<ToggleGroup.Item value="left" aria-label="Align Left">
<AlignLeftIcon />
</ToggleGroup.Item>
<ToggleGroup.Item value="center" aria-label="Align Center">
<AlignCenterIcon />
</ToggleGroup.Item>
<ToggleGroup.Item value="right" aria-label="Align Right">
<AlignRightIcon />
</ToggleGroup.Item>
<ToggleGroup.Item value="justify" aria-label="Align Justify">
<AlignJustifyIcon />
</ToggleGroup.Item>
</ToggleGroup.Root>
</Stack>
)
}
Insert code snippet into your project. Update import paths as needed.
import { ToggleGroup } from '@ark-ui/react/toggle-group'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'
const styles = tv(
{
base: 'toggleGroup',
defaultVariants: { size: 'md', variant: 'outline' },
slots: { root: 'toggleGroup__root', item: 'toggleGroup__item' },
variants: {
variant: {
outline: {
root: 'toggleGroup__root--variant_outline',
item: 'toggleGroup__item--variant_outline',
},
ghost: {
root: 'toggleGroup__root--variant_ghost',
item: 'toggleGroup__item--variant_ghost',
},
},
size: {
sm: { root: 'toggleGroup__root--size_sm', item: 'toggleGroup__item--size_sm' },
md: { root: 'toggleGroup__root--size_md', item: 'toggleGroup__item--size_md' },
lg: { root: 'toggleGroup__root--size_lg', item: 'toggleGroup__item--size_lg' },
},
},
},
{ twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)
export const Root = withProvider(ToggleGroup.Root, 'root')
export const Item = withContext(ToggleGroup.Item, 'item')
export type RootProps = ComponentProps<typeof Root>
export interface ItemProps extends ComponentProps<typeof Item> {}
import { ToggleGroup } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'
const styles = tv(
{
base: 'toggleGroup',
defaultVariants: { size: 'md', variant: 'outline' },
slots: { root: 'toggleGroup__root', item: 'toggleGroup__item' },
variants: {
variant: {
outline: {
root: 'toggleGroup__root--variant_outline',
item: 'toggleGroup__item--variant_outline',
},
ghost: {
root: 'toggleGroup__root--variant_ghost',
item: 'toggleGroup__item--variant_ghost',
},
},
size: {
sm: { root: 'toggleGroup__root--size_sm', item: 'toggleGroup__item--size_sm' },
md: { root: 'toggleGroup__root--size_md', item: 'toggleGroup__item--size_md' },
lg: { root: 'toggleGroup__root--size_lg', item: 'toggleGroup__item--size_lg' },
},
},
},
{ twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)
export const Root = withProvider(ToggleGroup.Root, 'root')
export const Item = withContext(ToggleGroup.Item, 'item')
export type RootProps = ComponentProps<typeof Root>
export interface ItemProps extends ComponentProps<typeof Item> {}
Not yet available