Forms
Example Form
In this demonstration we have used common components that might be found in a typical form. You can see the setup below in the code excerpt below the demo.
You will need to fill the form inputs that are required (marked accordingly) before the 'Send' button is active. You can put what you like there as this form is not actually sending the form entries back to the server.
We have randomized this form so that the submit result will either be 'Success', 'Warning', or 'Error' and the feedback will reflect this. We have also added a mocked delay on submitting the form, so you can see the 'Sending...' button feedback.
Fields marked with * are required
const formInputOptions: FormInputOptions[] = [
  {
    type: "text",
    id: "firstName",
    label: "First Name",
    autoComplete: "given-name",
    helperText: "Required",
    required: true,
    min: 3,
    max: 50,
  },
  {
    type: "text",
    id: "middleName",
    label: "Middle Name",
    autoComplete: "additional-nam",
    max: 50,
  },
  {
    type: "text",
    id: "lastName",
    label: "Last Name",
    autoComplete: "family-name",
    helperText: "Required",
    required: true,
    min: 3,
    max: 50,
  },
] as const;
const adapterOptions: FormaAdapterOptions = {
  formInputOptions: formInputOptions,
  disableSubmitButtonUntilValid: true,
};

const formAdapter = new FormAdapter(adapterOptions);

const submitAction = async () => {
  // send data to API
  ...
  const response: FormSubmittedResponse = {
    result: "SUCCESS",
  };
  return response;
};

const { send } = useSubmit(formAdapter, submitAction);

const handleFormSubmit = async (formValues: FormValue[]) => {  
  const firstName = formAdapter.GetValue("firstName");
  const middleName = formAdapter.GetValue("middleName");
  const lastName = formAdapter.GetValue("lastName");
  await send();
};

<Form
  submitOnEnterKey
  actionFeedbackButtonStateTexts={{
    inActiveText: "Send",
    activeText: "Sending",
  }}
  formAdapter={formAdapter}
  onFormSubmit={handleFormSubmit}
  className="gap-2 flex flex-row max-sm:flex-col"
/>
Buttons
Buttons, need we explain? Oh, I suppose we could mention that we can set the priority to a 'secondary' level and also set a button to be disabled.
<Button>
  Click me
</Button>
<Button priority="secondary">
  Click me
</Button>
<Button disabled={true}>
  Click me
</Button>
ToggleButtons
Toggle buttons are like buttons except that they change state depending on whether they are active or not.
<ToggleButton>
  Toggle me
</ToggleButton>
<ToggleButton initiallyactive="true">
  Toggle me
</ToggleButton>
<ToggleButton disabled={true}>
  Toggle me
</ToggleButton>
ButtonGroups
Button Groups are a list of buttons visually bounded together.
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button priority="secondary">Three</Button>
  <Button disabled>Four</Button>
</ButtonGroup>
<ToggleButtonGroup>
  <ToggleButton>Alpha</ToggleButton>
  <ToggleButton initiallyactive={true}>Beta</ToggleButton>
  <ToggleButton disabled>Gamma</ToggleButton>
</ToggleButtonGroup>
Action Feedback Buttons
Action Feedback Buttons are like normal buttons but offer a better feedback for processing and results to the action of clicking the button (i.e. success, warnings or errors). Please click each of the three active buttons below to see examples of all three results.
const [buttonState, setButtonState] = useState<ActionFeedbackButtonState>(
  ActionFeedbackButtonState.IDLE
);
const actionFeedbackButtonStateTexts: ActionFeedbackButtonStateTexts = {
  inActiveText: "Process",
  activeText: "Processing",
  successText: "Great!",
  warningText: "Not so great!",
  errorText: "Awful!",
};
return (
  <div className="flex flex-col gap-2">
    <div className="flex flex-row max-md:flex-col gap-2">
      <ActionFeedbackButtonWrapper
        actionFeedbackButtonStateTexts={actionFeedbackButtonStateTexts}
        resultActionFeedbackButtonState={"SUCCESS"}
      />
      <ActionFeedbackButtonWrapper
        actionFeedbackButtonStateTexts={actionFeedbackButtonStateTexts}
        resultActionFeedbackButtonState={"WARNING"}
      />
      <ActionFeedbackButtonWrapper
        actionFeedbackButtonStateTexts={actionFeedbackButtonStateTexts}
        resultActionFeedbackButtonState={"ERROR"}
      />
    </div>
    <div className="flex flex-row max-md:flex-col gap-2">
      <ActionFeedbackButtonWrapper
        actionFeedbackButtonStateTexts={actionFeedbackButtonStateTexts}
        resultActionFeedbackButtonState={"SUCCESS"}
        initialActionFeedbackButtonState={"DISABLED"}
      />
    </div>
  </div>
);
TextFields
A text input with no attributes.
<TextField type="text" />
<TextField
  disabled={true}
  type="text"
/>
Another text input input with some standard attributes (placeholder and autoComplete)
<TextField
  autoComplete="name"
  placeholder="Type your name here"
  type="text"
/>
<TextField
  autoComplete="name"
  disabled={true}
  placeholder="Type your name here"
  type="text"
/>
A password field acting as expected.
<TextField
  autoComplete="password"
  type="password"
/>
<TextField
  autoComplete="password"
  disabled={true}
  type="password"
/>
NewPasswordTextFields
This component provides a ready made dual set of Password and Password Confirm inputs with a password strength indication.
S
L
U
1
#
R
<NewPasswordTextFields />
Selects
Selects/Options will give you the familiar dropdown picker component.
<Select>
  <Option value="">Please Choose</Option>
  <Option value={"1"}>One</Option>
  <Option value={"2"}>Two</Option>
  <Option value={"3"}>Three</Option>
</Select>
<Select disabled>
  <Option value="">Please Choose</Option>
  <Option value={"1"}>One</Option>
  <Option value={"2"}>Two</Option>
  <Option value={"3"}>Three</Option>
</Select>
Switches
Switches are a good replacement for checkboxes.
Set these two buttons to true
const [likeIt, setLikeIt] = useState(false);
const [wicked, setWicked] = useState(false);

return (
  <div className="w-96">
    <Switch
      label="Do you really like it?"
      checked={likeIt}
      onClick={() => setLikeIt(!likeIt)}
    />
    <Switch
      label="Is it, is it wicked?"
      checked={wicked}
      onClick={() => setWicked(!wicked)}
    />
    {likeIt && wicked ? (
      <InlineLink
        href="https://en.wikipedia.org/wiki/Do_You_Really_Like_It%3F"
        target="_blank"
      >
        We're lovin' it Lovin' it, lovin' it We're lovin' it like that
      </InlineLink>
    ) : (
      <div>Set these two buttons to true</div>
    )}
  </div>
);
Sliders
Sliders will give you a range of values that you can quickly adjust.
Plain and bare-boned ...
<Slider />
With an initial starting value and the current value displayed ...
30
<Slider
  label="Initialized"
  showValue={true}
  value={30}
/>
With min, max and step values ...
0
<Slider
  label="Bound"
  max={10}
  min={0}
  showValue={true}
  step={2}
  value={0}
/>
With min, max, steps and ticks ...
100
<Slider
  label="Ticked"
  max={300}
  min={100}
  showTicks={true}
  showValue={true}
  step={40}
  value={100}
/>

FUTORO