Adding/removing an input

[lgalloherran]

Background

I'm working on a couple of forms where the user can add an email or new item as an input button.

Feedback

Feedback on the adding/removing input interaction that I'm propossing.

Stage of design

Define

Research

No response

Relevant links

Figma prototype

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Input field (updated: 05/10/2023, similarity score: 87%)
• Secure Onboarding (updated: 01/05/2024, similarity score: 87%)
• Adding filter with a variety of filtering options (updated: 06/06/2023, similarity score: 86%)

[dosubot[bot]]

Based on the best practices of the Paste design system, here are some suggestions for adding and removing inputs in forms:

1. Grouping Inputs: Use the FormControl component to group each input with its label and help text. This ensures a cohesive unit and is beneficial for accessibility and maintaining a consistent layout.

2. Accessibility: Use the aria-describedby attribute to link the input field with the help text. This provides screen reader users with the necessary context.

3. Unique Identifiers: Use the useUID hook from the @twilio-paste/uid-library to generate unique IDs for input elements and their corresponding labels and help texts.

4. Feedback: Use the HelpText component to provide additional information or feedback related to each input. This can include general information, error messages, or success messages.

5. Customization: Inputs support customization through insertBefore and insertAfter props. These props allow you to add custom elements or text before or after the input field.

6. Handling State and Events: Handle input value changes with a React state (useState) and update the state based on user input (onChange event). Additionally, actions like handleFocus and handleBlur can be used to perform actions on focus and blur events.

7. Variants: The design system provides different variants for inputs, such as inverse for use on dark backgrounds.

8. Required Fields: Use the required attribute to indicate mandatory fields. This is complemented by the Label component's required prop, visually indicating that the field is required.

9. Error Handling: Inputs have a hasError prop to indicate error states. This is used alongside error-specific HelpText to provide feedback on validation errors or other input issues.

10. Disabled and ReadOnly States: Inputs can be marked as disabled or readOnly to fit different use cases.

For handling the addition and removal of form inputs, you can use the FormPill and FormPillGroup components. FormPillGroup acts as a container for multiple FormPill components, providing a grouped set of inputs that can be interacted with. FormPill represents individual input items within the group that can be selected, dismissed (removed), or disabled. The onDismiss prop in FormPill is specifically used for handling the removal of a pill.

You can find more information and examples in the Input and FormPillGroup stories in the Paste repository.

I hope this helps! If you have any more questions or need further clarification, feel free to ask.

Sources

• packages/paste-core/components/input/stories/input.stories.tsx
• packages/paste-core/components/form-pill-group/stories/index.stories.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[roxanagomez]

Hey @lgalloherran
Could you please share a screenshot of the prototype, specifically showing the default state before adding the input and a screenshot after adding it? In the prototype you shared it is not clear how the interaction works.

[lgalloherran]

Sure,
This is the default state:

This is the +1 state:

[nkrantz]

Hey Luz! Thanks for coming to office hours last week. You can watch the recording here (password in #help-design-system on slack).