Radio is based on input element
The Radio component is based on the HTML input element and supports common margin props.
Radix Primitives · all subjects
radio
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Radio size prop values
The Radio component supports the size prop with values: 1, 2, and 3.
Radio variant prop values
The Radio component supports the variant prop with values: surface, classic, and soft.
Radio color prop
The Radio component supports the color prop to assign a specific color. Example colors include: indigo, cyan, orange, crimson, and gray.
Radio highContrast prop
The Radio component supports the highContrast prop to increase color contrast with the background.
Radio disabled attribute
The Radio component supports the native disabled attribute to create a disabled radio button.
Radio defaultChecked prop
The Radio component supports the defaultChecked prop to set a radio button as checked by default.
Radio name prop
The Radio component supports the name prop, which is used to group radio buttons together for selection purposes.
Radio value prop
The Radio component supports the value prop to specify the value of the radio button.
Radio alignment with Text
When Radio is composed within Text, it automatically centers with the first line of text and aligns well with multi-line text.
Radio basic usage example
Example showing Radio usage with name, value, and defaultChecked props: ```jsx <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> ```