#230: add required attr to multiple choice inputs (#232)

* add required attr to multiple choice inputs

* add required field to multiple choice preview components

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Ramsay Sewell
2023-04-14 08:29:48 +01:00
committed by GitHub
parent 50435413c3
commit 29cf117fda
3 changed files with 8 additions and 3 deletions

View File

@@ -21,7 +21,10 @@ export default function Modal({
<div aria-live="assertive" className="absolute inset-0 flex cursor-pointer items-end px-4 py-6 sm:p-6">
<div className="flex w-full flex-col items-center sm:items-end">
<div
className="mr-6 flex items-center rounded-t bg-amber-500 px-3 text-sm font-semibold text-white hover:cursor-pointer"
className={cn(
show ? "opacity-100" : "opacity-0",
"mr-6 flex items-center rounded-t bg-amber-500 px-3 text-sm font-semibold text-white transition-all duration-500 ease-in-out hover:cursor-pointer"
)}
onClick={reset}>
<ArrowPathIcon className="mr-1.5 mt-0.5 h-4 w-4 " />
Preview

View File

@@ -37,7 +37,7 @@ export default function MultipleChoiceSingleQuestion({
<legend className="sr-only">Choices</legend>
<div className="relative space-y-2 rounded-md">
{question.choices &&
question.choices.map((choice) => (
question.choices.map((choice, idx) => (
<label
key={choice.id}
className={cn(
@@ -56,6 +56,7 @@ export default function MultipleChoiceSingleQuestion({
setSelectedChoice(e.currentTarget.value);
}}
style={{ borderColor: brandColor, color: brandColor }}
required={question.required && idx === 0}
/>
<span id={`${choice.id}-label`} className="ml-3 font-medium">
{choice.label}

View File

@@ -37,7 +37,7 @@ export default function MultipleChoiceSingleQuestion({
<legend className="fb-sr-only">Choices</legend>
<div className="fb-relative fb-space-y-2 fb-rounded-md fb-bg-white">
{question.choices &&
question.choices.map((choice) => (
question.choices.map((choice, idx) => (
<label
key={choice.id}
className={cn(
@@ -58,6 +58,7 @@ export default function MultipleChoiceSingleQuestion({
setSelectedChoice(e.currentTarget.value);
}}
style={{ borderColor: brandColor, color: brandColor }}
required={question.required && idx === 0}
/>
<span id={`${choice.id}-label`} className="fb-ml-3 fb-font-medium">
{choice.label}