Design System Beacon

Selectable Input

Selectable inputs allow users to choose from a set of options. They display an icon above text and provide clear visual feedback for selected and unselected states.

Overview

Selectable inputs are interactive components that allow users to select from a set of options. They feature an icon above text and provide clear visual feedback through background color and border changes when selected or unselected.

All selectable input styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the selectable input and see how it looks in real-time.

Size

Label

Selected

Disabled

Full Width

Corner Radius

Option

<SelectableInput />

Anatomy

A selectable input consists of several parts that work together to create a cohesive selection control.

Option

Icon

Visual representation above text

Label

Text description below icon

Container

Border, padding, border-radius, background

Variants & States

Selectable inputs support different sizes and states to accommodate various use cases.

Sizes

sm

md

lg

xl

States

Default

Selected

Disabled

Usage Guidelines

Use selectable inputs for choosing from a set of options.
Provide clear, descriptive labels for each option.
Use meaningful icons that represent the option.
Group related selectable inputs together.
Provide clear visual feedback for selected state.
Use appropriate sizes based on context and importance.
Ensure sufficient spacing between selectable inputs.

Don't

Don't use selectable inputs for navigation (use buttons or links instead).
Don't use selectable inputs for text input (use input fields instead).
Don't use too many selectable inputs in a single view.
Don't disable selectable inputs without explaining why.
Don't use unclear or ambiguous icons.
Don't use selectable inputs for destructive actions.
Don't make labels too long or wrap awkwardly.

Accessibility

Always provide clear labels for selectable inputs using the label prop.
Ensure sufficient color contrast between text and background in both selected and unselected states.
Provide keyboard navigation support (Tab to navigate, Space/Enter to select).
Use aria-pressed attribute to indicate selected state.
Ensure selectable inputs are large enough to be easily clickable (minimum 44x44px touch target).
Provide clear visual feedback for all interactive states (hover, focus, selected).
Use disabled state appropriately and provide alternative ways to access disabled options if needed.

API Reference

Selectable input component props and types.

SelectableInputProps

interface SelectableInputProps {
  label?: string;
  icon?: React.ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
  selected?: boolean;
  disabled?: boolean;
  cornerRadius?: CornerRadiusStep;
  fullWidth?: boolean;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

Props

label

string

"Option"

Text label displayed below the icon.

icon

React.ReactNode

GridUILayoutIcon

Optional icon displayed above the label. Defaults to GridUILayoutIcon if not provided.

size

"sm" | "md" | "lg" | "xl"

"md"

Selectable input size: sm (80x80px), md (100x100px), lg (120x120px), xl (140x140px).

selected

boolean

false

Whether the selectable input is in the selected state. Changes background color and border.

disabled

boolean

false

Whether the selectable input is disabled. Prevents interaction and reduces opacity.

cornerRadius

CornerRadiusStep

2

Border radius step: 0 (none), 1 (extra small), 2 (small), 3 (medium), 4 (large), 5 (extra large/full).

fullWidth

boolean

false

Whether the selectable input should take full width of its container.

onClick

(e: React.MouseEvent<HTMLButtonElement>) => void

—

Callback function called when selectable input is clicked.

Usage Examples

Copyable code snippets for common selectable input use cases.

Basic Selectable Input

import { SelectableInput } from 'beacon-ui';

<SelectableInput 
  label="Option"
/>

Selected State

import { SelectableInput } from 'beacon-ui';

<SelectableInput 
  label="Option"
  selected
/>

With Custom Icon

import { SelectableInput } from 'beacon-ui';
import { GridUILayoutIcon } from 'beacon-icons';

<SelectableInput 
  label="Option"
  icon={<GridUILayoutIcon size="sm" />}
/>

Multiple Options

import { SelectableInput } from 'beacon-ui';

<div style={{ display: 'flex', gap: 'var(--spacing-200)' }}>
  <SelectableInput label="Option 1" />
  <SelectableInput label="Option 2" selected />
  <SelectableInput label="Option 3" />
</div>