51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { classNames } from '../lib/class-names'
|
|
|
|
export interface SegmentedControlOption<Value extends string> {
|
|
readonly value: Value
|
|
readonly label: string
|
|
readonly disabled?: boolean
|
|
}
|
|
|
|
export interface SegmentedControlProps<Value extends string> {
|
|
readonly legend: string
|
|
readonly name: string
|
|
readonly value: Value
|
|
readonly options: readonly SegmentedControlOption<Value>[]
|
|
readonly onValueChange?: (value: Value) => void
|
|
readonly className?: string
|
|
readonly disabled?: boolean
|
|
}
|
|
|
|
export function SegmentedControl<Value extends string>({
|
|
legend,
|
|
name,
|
|
value,
|
|
options,
|
|
onValueChange,
|
|
className,
|
|
disabled = false,
|
|
}: SegmentedControlProps<Value>) {
|
|
return (
|
|
<fieldset
|
|
className={classNames('drb-segmented-control', className)}
|
|
disabled={disabled}
|
|
>
|
|
<legend className="drb-visually-hidden">{legend}</legend>
|
|
{options.map((option) => (
|
|
<label className="drb-segmented-control__option" key={option.value}>
|
|
<input
|
|
className="drb-segmented-control__input"
|
|
type="radio"
|
|
name={name}
|
|
value={option.value}
|
|
checked={option.value === value}
|
|
disabled={option.disabled}
|
|
onChange={() => onValueChange?.(option.value)}
|
|
/>
|
|
<span className="drb-segmented-control__label">{option.label}</span>
|
|
</label>
|
|
))}
|
|
</fieldset>
|
|
)
|
|
}
|