![]() ![]() Ensure text exceeds a contrast ratio of 4.5:1 against the background to meet WCAG Success Criterion 1.4.3 for minimum contrast.tag with attribute label="description" is used to display Text Area.When possible, error and alert states should provide information on how to fix validation or formatting issues.If both icons and visible text are used to differentiate between errors and alerts, the icons areĬonsidered redundant and should not provide any alternative text for screen readers.Avoid using color alone to differentiate between errors and alerts.Text Areas must have a visual label that clearly indicates the purpose of the Text Area.Given the 'Placeholder' story is rendered If you provided a Component, this component should forward the ref using `React.forwardRef`Īnd spread extra props to a root element. Optional override of the default element used by the component. If `as` is a component, the reference will be to that component (or element if the component If `as` is set to an element, it will be that element. If the component represents an element, this ref will be a reference to the True if the component should grow to its container's width. ![]() The user will be unable to interact with the TextArea. The function called when the TextArea state changes. The type of error associated with the TextArea (if applicable). If true, set the TextArea to the disabled state. Text Area should be used in tandem with Form Field to meet Use a Text Input for single line of text.Use a Rich Text Editor to give users the ability to format text.Use the Text Area to fit longer text descriptions, usually around one paragraph.As the user types in the Text Area, the placeholder text is replaced with the user’s input. For all Text Areas on Web, a user clicking into a field or label that's not disabled will trigger the text cursor toĪppear, allowing users the ability to type.To ensure we don’t overwhelm users, there shouldn’t be more than two Wide Text Areas on a page.Use the Text Area component when you need to let users enter an amount of text that’s longer than.Placeholder/Body Text: Placeholder text is optional and shows an example of how the text is used.Input Container: Rectangular container that houses the placeholder and body text.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |