Survey Fields
ImageChoice, Likert, and YesNo fields for surveys, questionnaires, and feedback forms
ImageChoice
Visual selection from image cards. Ideal for choosing styles, products, or categories.
<Form.Field.ImageChoice
name="style"
label="Choose a style"
options={[
{ value: 'modern', label: 'Modern', image: '/img/modern.jpg' },
{ value: 'classic', label: 'Classic', image: '/img/classic.jpg' },
]}
columns={3}
multiple={false}
/>Value: string (single) or string[] (when multiple={true})
| Prop | Type | Default | Description |
|---|---|---|---|
options | ImageChoiceOption[] | required | Options with images |
columns | number | 3 | Grid columns (responsive: 1→2→N) |
multiple | boolean | false | Multi-select mode |
Likert
Agreement/satisfaction scale with labeled points. Standard for NPS and survey forms.
<Form.Field.Likert
name="satisfaction"
label="How satisfied are you?"
anchors={['Very Unsatisfied', 'Unsatisfied', 'Neutral', 'Satisfied', 'Very Satisfied']}
showNumbers={true}
/>Value: number (1-based index of selected point)
| Prop | Type | Default | Description |
|---|---|---|---|
anchors | string[] | required | Labels for each point |
showNumbers | boolean | false | Show point numbers |
On mobile, the horizontal scale switches to a vertical list.
YesNo
Binary choice with large clickable blocks. Good for consents, confirmations, and simple questions.
<Form.Field.YesNo
name="agree"
label="Do you agree?"
yesLabel="Yes, I agree"
noLabel="No, I decline"
variant="buttons"
/>Value: boolean
| Prop | Type | Default | Description |
|---|---|---|---|
yesLabel | string | 'Да' | Yes button text |
noLabel | string | 'Нет' | No button text |
variant | 'buttons' | 'thumbs' | 'emoji' | 'buttons' | Visual style |
Variants: buttons (text only), thumbs (with thumbs up/down), emoji (with happy/sad face).
Live Example
Try the interactive example on forms-example.letar.best.