Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Radio

Standalone radio button that can be used in any layout.

View sourceReport an issueView in Playground
<Flex align="start" direction="column" gap="1">

  <Flex asChild gap="2">

    <Text as="label" size="2">

      <Radio name="example" value="1" defaultChecked />

      Default

    </Text>

  </Flex>



  <Flex asChild gap="2">

    <Text as="label" size="2">

      <Radio name="example" value="2" />

      Comfortable

    </Text>

  </Flex>



  <Flex asChild gap="2">

    <Text as="label" size="2">

      <Radio name="example" value="3" />

      Compact

    </Text>

  </Flex>

</Flex>

API Reference

This component inherits props from the Radio Group primitive and supports common margin props.

Root

Contains all the parts of a radio group.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value

Item

An item in the group that can be checked.

Examples

Size

Use the size prop to control the radiobutton size.

<Flex align="center" gap="4">

  <Flex gap="2">

    <Radio size="1" name="size-1" value="1" defaultChecked />

    <Radio size="1" name="size-1" value="2" />

  </Flex>



  <Flex gap="2">

    <Radio size="2" name="size-2" value="1" defaultChecked />

    <Radio size="2" name="size-2" value="2" />

  </Flex>



  <Flex gap="2">

    <Radio size="3" name="size-3" value="1" defaultChecked />

    <Radio size="3" name="size-3" value="2" />

  </Flex>

</Flex>

Variant

Use the variant prop to control the visual style of the radio buttons.

<Flex align="center" gap="4">

  <Flex gap="2">

    <Radio variant="surface" name="surface" value="1" defaultChecked />

    <Radio variant="surface" name="surface" value="2" />

  </Flex>



  <Flex gap="2">

    <Radio variant="classic" name="classic" value="1" defaultChecked />

    <Radio variant="classic" name="classic" value="2" />

  </Flex>



  <Flex gap="2">

    <Radio variant="soft" name="soft" value="1" defaultChecked />

    <Radio variant="soft" name="soft" value="2" />

  </Flex>

</Flex>

Color

Use the color prop to assign a specific color.

<Flex as="span" gap="2">

  <Radio color="indigo" defaultChecked />

  <Radio color="cyan" defaultChecked />

  <Radio color="orange" defaultChecked />

  <Radio color="crimson" defaultChecked />

</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Grid columns="5" display="inline-grid" gap="2">

  <Radio color="indigo" defaultChecked />

  <Radio color="cyan" defaultChecked />

  <Radio color="orange" defaultChecked />

  <Radio color="crimson" defaultChecked />

  <Radio color="gray" defaultChecked />



  <Radio color="indigo" defaultChecked highContrast />

  <Radio color="cyan" defaultChecked highContrast />

  <Radio color="orange" defaultChecked highContrast />

  <Radio color="crimson" defaultChecked highContrast />

  <Radio color="gray" defaultChecked highContrast />

</Grid>

Alignment

Composing Radio within Text automatically centers it with the first line of text. It is automatically well-aligned with multi-line text too.

<Flex direction="column" gap="3">

  <Flex align="start" direction="column" gap="1">

    <Flex asChild gap="2">

      <Text as="label" size="2">

        <Radio size="1" name="alignment-1" value="1" defaultChecked />

        Default

      </Text>

    </Flex>

    <Flex asChild gap="2">

      <Text as="label" size="2">

        <Radio size="1" name="alignment-1" value="2" />

        Compact

      </Text>

    </Flex>

  </Flex>



  <Flex align="start" direction="column" gap="1">

    <Flex asChild gap="2">

      <Text as="label" size="3">

        <Radio size="2" name="alignment-2" value="1" defaultChecked />

        Default

      </Text>

    </Flex>

    <Flex asChild gap="2">

      <Text as="label" size="3">

        <Radio size="2" name="alignment-2" value="2" />

        Compact

      </Text>

    </Flex>

  </Flex>



  <Flex align="start" direction="column" gap="1">

    <Flex asChild gap="2">

      <Text as="label" size="4">

        <Radio size="3" name="alignment-3" value="1" defaultChecked />

        Default

      </Text>

    </Flex>

    <Flex asChild gap="2">

      <Text as="label" size="4">

        <Radio size="3" name="alignment-3" value="2" />

        Compact

      </Text>

    </Flex>

  </Flex>

</Flex>

Disabled

Use the native disabled attribute to create a disabled radiobutton.

<Flex direction="column" gap="3">

  <Flex align="start" direction="column" gap="1">

    <Flex asChild gap="2">

      <Text as="label" size="2">

        <Radio name="enabled" value="1" defaultChecked />

        On

      </Text>

    </Flex>

    <Flex asChild gap="2">

      <Text as="label" size="2">

        <Radio name="enabled" value="2" />

        Off

      </Text>

    </Flex>

  </Flex>



  <Flex align="start" direction="column" gap="1">

    <Flex asChild gap="2">

      <Text as="label" size="2" color="gray">

        <Radio disabled name="disabled" value="1" defaultChecked />

        On

      </Text>

    </Flex>

    <Flex asChild gap="2">

      <Text as="label" size="2" color="gray">

        <Radio disabled name="disabled" value="2" />

        Off

      </Text>

    </Flex>

  </Flex>

</Flex>
PreviousProgress
NextRadio Group
Edit this page on GitHub.