Select allows users to choose one option from a predefied list of options.
import { Select, SelectItem, SelectItemGroup } from "@wfp/react"
Below are examples of how to use the Select
component from the design system.
import { Select, SelectItem } from "@wfp/react"; <Select labelText="Input" helperText="Optional helperText" > <SelectItem text="Option 1" value="1" /> <SelectItem text="Option 2" value="2" /> <SelectItem text="Option 3" value="3" /> </Select>;
SelectItemGroup
Here is the corrected sentence:
The SelectItemGroup
is necessary for grouping options or SelectItem
s.
import { Select, SelectItem, SelectItemGroup, } from "@wfp/react"; <Select labelText="Frameworks" helperText="Optional helperText" > <SelectItemGroup label="Javascript"> <SelectItem text="Option 1" value="1" /> <SelectItem text="Option 2" value="2" /> </SelectItemGroup> <SelectItemGroup label="Python"> <SelectItem text="Option 3" value="1" /> <SelectItem text="Option 4" value="2" /> </SelectItemGroup> </Select>;
const FormExample = () => { const [defaultValues, setDefaultValues] = useState( {} ); const { control, register, handleSubmit, watch, reset, } = useForm({ defaultValues }); const [data, setData] = useState({}); const setDefaultValuesFunc = (e) => { console.log(e.target.value); try { const values = JSON.parse(e.target.value); setDefaultValues(values); } catch (e) { console.log(e); } }; const resetInputs = () => { reset(defaultValues); }; const currentValues = watch(); return ( <> <form onSubmit={handleSubmit((data) => setData(data) )} > <> <Controller name="inputnameB" control={control} render={({ field }) => { return ( <Select labelText="The controlled Input" helperText="Optional helperText" {...field} onChange={(e) => field.onChange(e.target.value) } value={field.value} > <SelectItem text="Option 1" value="1" /> <SelectItem text="Option 2" value="2" /> <SelectItem text="Option 3" value="3" /> </Select> ); }} /> </> <Button type="submit">Submit</Button>{" "} <Button onClick={resetInputs} kind="secondary"> Reset here </Button> <div className="debug"> <h4>Submitted form data</h4> <pre>{JSON.stringify(data, null, 2)}</pre> <h4>Current values</h4> <pre> {JSON.stringify(currentValues, null, 2)} </pre> <TextInput labelText="Default values (editable)" defaultValue={JSON.stringify( defaultValues )} onChange={setDefaultValuesFunc} /> </div> </form> </> ); }; render(<FormExample />);
For multiselect, autocomplete or dynamic inputs, React Select is recommended
To use the WFP UI styling add the following className
and classNamePrefix
props.
import ReactSelect from "react-select";<ReactSelectclassName="wfp--react-select-container"classNamePrefix="wfp--react-select"isMultiid="abc"options={options}/>;