Choice Chip

쉬움

단일 선택 가능한 칩 컴포넌트

#click#javascript#choice

라이브 데모

코드

ChoiceChip.tsx

import React, { useState } from 'react';

export const ChoiceChip: React.FC = () => {
  const [selected, setSelected] = useState<string>('medium');
  const sizes = ['small', 'medium', 'large'];

  return (
    <div className="chip-demo-container">
      {sizes.map((size) => (
        <button
          key={size}
          className={`choice-chip ${selected === size ? 'choice-chip-selected' : ''}`}
          onClick={() => setSelected(size)}
        >
          {size}
        </button>
      ))}
    </div>
  );
};

chips.css

.choice-chip {
  padding: 10px 20px;
  border: 2px solid var(--border-color);
  background: transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.choice-chip-selected {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: white;
}