Build / Molecules

RsvpControl

molecule

Tri-state RSVP for an event, with the running tally kept alongside it.

Built on ChoiceGroup rather than duplicating its selection behavior — the icons live in the option label, and the tally is the one thing a plain choice group doesn't carry.

import { RsvpControl } from '@meetcard/deck'

Example

<RsvpControl value={status} onChange={setStatus} counts={{ yes: 12, maybe: 3, no: 1 }} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = args => {
    const [value, setValue] = useState<RsvpStatus | undefined>(args.value)
    return <RsvpControl counts={{ yes: 12, maybe: 3, no: 1 }} value={value} onChange={setValue} />;
};

Answered yes. The count includes you.

Attending

Source

const Attending = args => {
    const [value, setValue] = useState<RsvpStatus | undefined>(args.value)
    return <RsvpControl counts={{ yes: 12, maybe: 3, no: 1 }} value={value} onChange={setValue} />;
};

Nobody has answered yet — the counts read zero rather than disappearing.

No Responses Yet

Source

const NoResponsesYet = args => {
    const [value, setValue] = useState<RsvpStatus | undefined>(args.value)
    return <RsvpControl counts={{ yes: 0, maybe: 0, no: 0 }} value={value} onChange={setValue} />;
};

Props

Prop	Type	Default	Description
`counts`required	`RsvpCounts`	—	Tallies shown below the control.
`className`	`string`	—	—
`label`	`string`	`'Are you attending?'`	—
`name`	`string`	—	—
`onChange`	`(status: RsvpStatus) => void`	—	—
`value`	`'yes' \| 'maybe' \| 'no'`	—	—