Radio Button

Radio buttons allow users to select a single option from a list options. All possible options are exposed up front for users to compare.

Usage

import { RadioButton } from '@elegantui/forms';

Basic Example

import { RadioButton } from '@elegantui/forms';

export default function App() {
  return (
    <RadioButton name='default' radioButtonText='RadioButton' value='radio' />
  );
}

Variants

RadioButton component is available in six variants.

import { RadioButton } from '@elegantui/forms';

export default function App() {
  return (
    <RadioButton
      name='primary'
      value='primary'
      radioButtonText='Primary'
      variant='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    />
  );
}

RadioButton Text

RadioButton component allows adding text next to the radio button using the radioButtonText prop.

import { RadioButton } from '@elegantui/forms';

export default function App() {
  return (
    <RadioButton
      name='primary'
      value='primary'
      radioButtonText='Primary'
      variant='primary'
    />
  );
}

Selected state

RadioButton component can be configured to have a default selected state by using the checked prop.

import { RadioButton } from '@elegantui/forms';

export default function App() {
  return (
    <RadioButton
      name='primary'
      value='primary'
      radioButtonText='Primary'
      variant='primary'
      checked
    />
  );
}

Disabled state

RadioButton component can be configured to have a disabled state by using the disabled prop.

import { RadioButton } from '@elegantui/forms';

export default function App() {
  return (
    <RadioButton
      name='primary'
      value='primary'
      radioButtonText='Primary'
      variant='primary'
      disabled
    />
  );
}

Custom styles

RadioButton component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

Available Props