Radio

The RadioGroup component manages the checked state of its Radio children.

Note

For card-style radio buttons, see the RadioCard docs.

Default variant

import { Radio, RadioGroup } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <RadioGroup defaultValue="1">
      <Radio value="1">Label</Radio>
      <Radio value="2">Label</Radio>
    </RadioGroup>
  );
}

⛶

Addon variant

Use variant="addon" on RadioGroup to render radios as checkmark-style indicators.

import { Radio, RadioGroup } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <RadioGroup variant="addon">
      <Radio value="1">Radio addon</Radio>
      <Radio value="2">Radio addon</Radio>
    </RadioGroup>
  );
}

⛶

Custom layout

import {
  Divider,
  Flex,
  Radio,
  RadioGroup,
  Stack,
  Text,
  ThemeBorder,
  ThemeColor,
  ThemeRadius,
  ThemeSpace,
} from "@caspeco/casper-ui-library";

export default function Demo() {
  const articles = [
    { value: "small", price: "+16kr", label: "Small soda", inStock: true },
    { value: "medium", price: "+22kr", label: "Medium soda", inStock: true },
    { value: "large", price: "+28kr", label: "Large soda", inStock: false },
  ];

  return (
    <RadioGroup variant="addon" name="soda-size" defaultValue="medium">
      <Stack
        border={ThemeBorder.XSmall}
        borderColor={ThemeColor.OnSurfaceBorder}
        borderRadius={ThemeRadius.Medium}
        bg={ThemeColor.Surface}
        width="300px"
        divider={<Divider margin="0 !important" />}
      >
        {articles.map((article) => (
          <Radio
            key={article.value}
            value={article.value}
            width="100%"
            isDisabled={!article.inStock}
            px={ThemeSpace.Medium}
            py={ThemeSpace.Medium}
            flexDirection="row-reverse"
          >
            <Flex justifyContent="space-between" width="100%">
              <Text>{article.label}</Text>
              <Text color={ThemeColor.OnSurfaceSubdued}>{article.price}</Text>
            </Flex>
          </Radio>
        ))}
      </Stack>
    </RadioGroup>
  );
}

⛶

Using isDisabled

Radio group can be wrapped with Fieldset to be provided form state logic. Fieldset provides context such as isInvalid, and isDisabled* to all radio children. See the Fieldset docs for examples.

*The isDisabled-property can also be provided to an individual radio or radio group without form context.

const sizes = ["small", "medium", "large"];

// All radio children will be disabled
<RadioGroup name="size-selection" isDisabled>
  {sizes.map((size) => (
    <Radio key={size}>{size}</Radio>
  ))}
</RadioGroup>;