-
Notifications
You must be signed in to change notification settings - Fork 2
Form Group
The FormGroup component is a React component designed to group together elements within a form, such as input fields, labels, and other form controls. It helps in organizing form fields for better visual structure and accessibility. This component is particularly useful for creating structured and visually coherent forms.
To incorporate the FormGroup component into your React project, import it as follows:
const { FormGroup } = window.$_gooee.framework;The FormGroup component is used to wrap one or more form controls along with their labels, providing a structured layout. It is typically used in forms to group related items together, enhancing both usability and aesthetics.
The FormGroup component accepts the following props:
-
children: The form elements to be included in the group, such as input fields, buttons, etc. -
className: Additional CSS class names to apply to the form group container. -
style: CSS styles to apply to the form group container. -
label: An optional label for the form group. If provided, it will be displayed above the children elements.
- Grouping Form Elements: Provides a container for grouping related form elements.
-
Custom Styling: Can be styled using the
classNameandstyleprops. - Optional Label: Supports an optional label to describe the grouped form elements.
The component uses the form-group class as its base, which can be extended or overridden with additional classes passed through the className prop. Inline styles can also be applied using the style prop.
<FormGroup label="Email">
<TextBox type="email" />
</FormGroup><FormGroup className="custom-form-group" style={{ margin: '10px' }} label="Credentials">
<TextBox />
<TextBox type="password" />
</FormGroup>Contributions to improve the FormGroup component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.