EffortChips
One choice among a few levels, such as how hard a model thinks. Pick it for three to six short options that fit on one line; use a Select for more.
- EffortChips
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, EffortChips
Effort
Review depth
Effort while the session is busy
Dark theme, EffortChips
Effort
Review depth
Effort while the session is busy
High contrast theme, EffortChips
Effort
Review depth
Effort while the session is busy
UsageLink to the section Usage
import { EffortChips } from '@skribly/ui/agents'<EffortChips label={t('effort')} levels={levels} value={effort} onChange={setEffort} defaultLabel={t('default')} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A radio group from React Aria: Tab enters at the chosen chip, arrow keys move between chips, Space or Enter picks one, and the group reads its label.
- The chosen chip shows a tick as well as a tint, and a system highlight border in forced colours.
- Chips wrap on a narrow screen and are at least 24px tall.
This demo runs through axe in all three themes on every test run. See what the tests check.