+ The select comes in three types: Outlined, Filled, and Standard. To + specify the variant, pass a value to the variant prop. +
++ If not specified, the default variant of the select if outlined. +
++ There are 3 size option for the select component: autowidth, small, + and fullWidth. Depending on the size of the select, different prop + can be passed to the component. +
++ An autoWidth option is passed to the component to enable this + attribute +
++ To generate small select, pass a size prop with a value of small +
++ The select will expand the full width of its parent when passed + fullWidth prop +
++ To add a label to the select component, wrap it inside a FormControl + component. Add an InputLabel component and link it to the select + component using the labelId prop. Ensure the label prop in the + Select component matches the InputLabel text. +
++ To add a placeholder, use the renderValue prop to display a + placeholder text when no value is selected. +
++ Additional props such as error, required, and disabled can be passed + to the select component to customize its behavior. +
++ NOTE: +
++ When the select component is marked as required, an asterisk is + added to the label to indicate this to the user. It is recommended + to use this feature in conjunction with the label for better + clarity. +
++ The select component can exhibit different state based on the + context and user input. Since it is usually used within a form + component, these states can act in response to the user input for + other components in the form. +
++ If the component is disabled, the dropdown menu won't display when + user clicks on the selection area. This behavior is useful when the + user is not allowed to select any option. +
++ This behavior is used to indicate that the user has made an error or + the selection is not compatible with other form components. +
++ If specified, the select component will be required to have an input + from the user. An asterisk will be displayed next to the label to + let the user know that the input is required. +
++ Additional props can be added to the select component to customize + its label and dropdown menu to provide use with more context of + their selection. +
++ The label is optional. If provided, helper text is displayed below + the component to give the user more context about the component. +
+ ++ A placeholder is a short hint or description that is displayed + inside an input field or select component before the user enters a + value. It provides a clue to the user about what kind of information + is expected in the field. The placeholder text disappears when the + user starts typing or selects an option. +
++ If the selection options are organized into groups, their groups can + be displayed within the dropdown menu to assist users in making + their selection. +
++ The multiple select component allows users to select more than one + option from the dropdown list. This is useful in scenarios where + multiple selections are required, such as selecting multiple tags, + categories, or items. +
++ Select component is a dropdown menu for selecting an option from a list. +
+ + ); +} diff --git a/src/sections/Projects/Sistent/components/select/index.js b/src/sections/Projects/Sistent/components/select/index.js new file mode 100644 index 000000000000..68c13842d2a3 --- /dev/null +++ b/src/sections/Projects/Sistent/components/select/index.js @@ -0,0 +1,226 @@ +import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { + FormControl, + InputLabel, + MenuItem, + Select, + OutlinedInput, +} from "@mui/material"; +import Header from "./header"; +import SectionNav from "./section-nav"; + +const SistentSelect = () => { + const { isDark } = useStyledDarkMode(); + const [multipleAges, setMultipleAges] = React.useState([]); + const handleMultiplSelect = (event) => { + let agesList = event.target.value; + setMultipleAges(agesList); + }; + + return ( ++ The Select component is a versatile and customizable element + commonly used in forms and user interfaces. It is designed to + present a list of options for users to choose from, either as a + single selection or multiple selections. This component plays a + vital role in collecting user-provided information efficiently and + intuitively. +
+ ++ To accommodate various design styles and use cases, the select + component offers numerous customizable properties. Developers can + customize how the component display the labels or selected option to + improve user experience. +
++ The default style is "outlined," featuring a thin line around the + selection area. The label appears above the selection, and the + dropdown menu is displayed below it. +
++ Filled select feature a background color fill. Depending on the + theme or intended action, the color fill ican range from a primary + brand color to any other applicable color in a brand's color + palette. +
++ The standard style features a simple underline below the selection + area. +
++ The select component can be adjusted in size to accommodate various + use cases. These size adjustments typically affect the height of the + component, while the width adjusts to fit the content. The height of + the select component is derived from our spacing system to maintain + consistency. We offer multiple sizes to meet different needs. +
++ The width of the component can scale automatically to fit the + content it contains. This ensures that the select component is + appropriately sized based on the options available, providing a + better user experience. +
++ The small size select component is designed to fit into more compact + spaces within a user interface. It is particularly useful when you + need to conserve space or when the select component is part of a + form with other small-sized elements. This ensures a consistent and + visually appealing layout. +
++ Full width select are more efficient in mobile designs and rightly + so in order to offer users with a wider touch area since the input + devices - the fingers, are a lot larger than the cursor on a desktop + or larger screen. +
+Multiple select component allows users to select more than one.
+