inputs/DSColorSelector

DSColorSelector

inputs
since 1.2.0

Grid of tappable color circles that updates selection on tap.

iOSmacOS

Purpose

Use for color picking in themes, tags, or customization settings. Shows selected color with a border ring.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
colorsreq[Color]—Available colors to choose from
selectionreqBinding<Color?>—Binding to selected color
circleSizeCGFloat32Diameter of each color circle
accessibilityLabelString?nilOptional accessibility label

Examples

Theme color picker

Select accent color for app theme.

swift
@State var accentColor: Color? = DSColor.primary

DSColorSelector(
    colors: [
        DSColor.primary,
        DSColor.accent,
        DSColor.success,
        DSColor.warning,
        DSColor.error,
        DSColor.info,
    ],
    selection: $accentColor,
    circleSize: 40
)

Tag color

Pick color for a tag or category.

swift
DSColorSelector(
    colors: tagColors,
    selection: $tag.color,
    accessibilityLabel: "Tag color"
)

Usage Guidelines

  • Limit to 6-10 colors for better UX
  • Use distinct, accessible colors with good contrast
  • Show selection with a clear border ring
  • Consider adding color names for accessibility

Related Components

ChipBadgeTag