UI Launch Docs
Components/Atoms

RadioButton

RadioButton component from the UILaunch design system, ideal for single selections within a group.

🔘 RadioButton

The RadioButton component is used when you want users to select a single option from a list. It supports different sizes, variants, and can be displayed with labels on either side. Use RadioButton inside a RadioButtonStack to manage selection state and layout direction.

radiobutton-preview

📦 Import

import RadioButton, { RadioButtonStack } from '@madefordevs1999/ui-launch-native/system/atoms/RadioButton';

🧩 Usage

import { Spacing } from '@madefordevs1999/ui-launch-native';
import Box from '@madefordevs1999/ui-launch-native/system/atoms/Box';
import RadioButton, { RadioButtonStack } from '@madefordevs1999/ui-launch-native/system/molecules/RadioButton';

const App = () => {
  return (
    <Box flex={1} justifyContent="center" alignItems="center">
      <RadioButtonStack
        defaultSelectedValue="option1"
        direction="column"
        space={Spacing.Spacing2}>
        <RadioButton
          value="rock"
          title="Rock"
          description="The hardest rock music"
        />
        <RadioButton
          value="pop"
          title="Pop"
          description="The most popular pop music"
        />
        <RadioButton
          value="jazz"
          title="Jazz"
          description="Just jazz"
          disabled
        />
      </RadioButtonStack>
    </Box>
  );
};

export default App;

Results

radio-button-example

📜 RadioButton Props

Prop NameTypeDefaultDescription
valuestring—Valor que identifica este botón de radio. Requerido.
titlestring—Etiqueta principal del botón.
descriptionstring—Etiqueta secundaria opcional.
disabledbooleanfalseDesactiva el botón.
labelsSide'left' | 'right''right'Posición de las etiquetas con respecto al círculo del botón.
onValueChange(value: string) => void—Callback opcional cuando se selecciona este botón.
fullWidthbooleanfalseSi el botón debe ocupar todo el ancho de su contenedor.
variant'primary' | 'secondary''primary'Estilo visual del botón.
size'small' | 'medium' | 'large''medium'Tamaño del botón y etiquetas.

📜 RadioButtonStack Props

Prop NameTypeDefaultDescription
defaultSelectedValuestring""Valor seleccionado por defecto.
direction'row' | 'column''column'Dirección del layout de los botones.
spaceSpacing—Espaciado entre los botones.

Chip

Chip component from the UILaunch design system, ideal for selection and filtering actions.

Rotate

Rotate component from the UILaunch design system. Applies a rotation transform to its children using a specified angle.

On this page

📦 Import🧩 UsageResults📜 RadioButton Props📜 RadioButtonStack Props