Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Usage

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

Basic Example

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

export default function App() {
  return <Checkbox name='default' checkboxText='Checkbox' value='checkbox' />;
}

Variants

Checkbox component is available in six variants.

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

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

Checkbox Text

Checkbox component allows adding text next to the checkbox using the checkboxText prop.

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

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

Checked state

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

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

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

Disabled state

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

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

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

Custom styles

Checkbox 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