Input fields are a fundamental part of web forms and allow users to provide information or interact with your application. This section covers how to use input components in your web application and provides examples of different input styles.
By using the `Input` component and customizing its attributes, you can create versatile input fields that meet your application's requirements and provide a seamless user experience. Be sure to choose the appropriate input type and validation rules based on your specific use case.
Input sizing is an important aspect of user interface design. It allows you to control the dimensions of input fields to ensure they fit well within your application's layout. This section covers how to adjust the size of input components and provides examples of different sizing options.
Controlling the size of input components is essential for achieving a visually appealing and user-friendly design. By using the `Input` component and specifying the desired size, you can ensure that input fields match your application's layout and styling requirements. Experiment with different sizes to find the one that best fits your design goals and provides an optimal user experience.
Input groups are a useful UI element for combining form inputs with additional text or icons. They are often used to create visually integrated and contextually relevant input fields. This section covers how to create input groups using the `InputGroup` component and provides examples of various input group configurations.
Input groups are a versatile tool for enhancing the usability and visual appeal of your forms. Whether you need to add icons, labels, or supplementary text to your input fields, the `InputGroup` component allows you to create cohesive and informative input groups. Experiment with different configurations to find the best way to present your form elements and improve the user experience.
Input states provide visual feedback to users about the status or validity of form inputs. This section covers how to apply different states to form inputs using CSS classes and provides examples of various input states.
Input states are crucial for providing feedback to users and enhancing the user experience in your forms. By applying the appropriate state classes, you can visually communicate the status of each input field, making it easier for users to understand and interact with your forms. Experiment with different styles and states to match the design and functionality of your web application.
The "Select Options" component allows you to create dropdown select elements with various options. This section covers how to use the component and provides examples of different select options.
The "Select Options" component is a versatile tool for creating dropdown select elements with a wide range of options. You can use it to build various forms and user interfaces that require user selection from predefined choices. Customize the options and styles to match your project's requirements, and make the user experience smooth and efficient.
The "Vertical Form" component allows you to create forms with a vertical layout, where form fields and labels are stacked on top of each other. This section covers how to use the component and provides examples of vertical forms.
The "Vertical Form" component is ideal for creating forms with a clean and straightforward layout, ensuring a seamless user experience. Customize it according to your project's needs, such as adding validation, error handling, and styling. This component simplifies the process of creating forms, making it easy to collect user input in a structured manner.
The "Horizontal Form" component allows you to create forms with a horizontal layout, where form labels are aligned to the left of the form fields. This section covers how to use the component and provides examples of horizontal forms.
The "Horizontal Form" component is useful for creating forms with a traditional horizontal layout, where labels are aligned to the left of input fields. Customize it according to your project's needs, such as adding validation, error handling, and styling. This component provides a clear and organized way to collect user input in a structured manner while maintaining a familiar form layout.
The "Inline Form" component allows you to create forms with inline elements, where form fields and labels appear horizontally on the same line. This section covers how to use the component and provides examples of inline forms.
The "Inline Form" component is useful for creating compact and space-efficient forms where form fields and labels appear on the same line. Customize it according to your project's needs, such as adding validation, error handling, and styling. This component provides a clean and concise way to collect user input in an inline manner, ideal for search bars, filters, and other compact form elements.
The "Checkbox & Switch" components provide a way to create interactive checkboxes and switches that users can toggle on and off. This section covers how to use these components and provides examples of checkboxes and switches.
The "Checkbox & Switch" components provide an easy way to create interactive elements for user input. Customize them according to your project's needs, and use event handling to respond to user interactions. These components are commonly used for settings, preferences, and forms where users need to make binary choices.
The "Radio" component is a fundamental input element that allows users to make a single selection from a list of options. It is commonly used in forms and questionnaires where users need to choose one option among several.
The "Radio" component is versatile and can be used to create both vertical and horizontal radio button groups. These radio buttons are commonly used in forms, surveys, and any scenario where exclusive choices are required.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| `formInputSize` | `sm`, `lg` | Specifies the size or dimensions of the input field within a form. Use this prop to control the visual appearance of the input, with options such as 'small', 'medium', or 'large' to suit your design and layout needs." |
| `rounded` | `boolean` | Whether to apply rounded corners to the textarea element |
| Prop | Type | Description |
|---|---|---|
| `formTextareaSize` | `sm`, `lg` | Specifies the size or dimensions of the input field within a form. Use this prop to control the visual appearance of the input, with options such as 'small', 'medium', or 'large' to suit your design and layout needs |
| `rounded` | `boolean` | Whether to apply rounded corners to the textarea element |
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| `formSelectSize` | `sm`, `lg` | Defines the size or dimensions of the select dropdown element within a form. Utilize this prop to customize the visual presentation of the select input, offering choices like 'small', 'medium', or 'large' to align with your design and layout preferences |
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
