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.

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