Reactstrap Choices Js
-Pro Component
A vanilla JS customisable select box/text input plugin.
We have styled the select picker to look similar to the dropdown and the other inputs.
Examples
Single Selection
import React from "react";
// JavaScript library for creating Dropdown Selects
import Choices from "choices.js";
// reactstrap components
import { Input } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
new Choices("#choices-single-default", {
searchEnabled: false,
});
}, []);
return (
<>
<Input
data-trigger=""
id="choices-single-default"
name="choices-single-default"
type="select"
>
<option placeholder="true">Single Option</option>
<option defaultValue="2">Foobar</option>
<option defaultValue="3">Is great</option>
<option defaultValue="4">Pick one</option>
</Input>
</>
);
}
export default Example;
Multiple Selection
import React from "react";
// JavaScript library for creating Dropdown Selects
import Choices from "choices.js";
// reactstrap components
import { Input } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
new Choices("#choices-multiple-default", {
searchEnabled: true,
delimiter: ",",
editItems: true,
removeItemButton: true,
});
}, []);
return (
<>
<Input
data-trigger=""
id="choices-multiple-default"
multiple="multiple"
name="choices-multiple-default"
type="select"
>
<option placeholder="true">Multiple Options</option>
<option defaultValue="2">Paris</option>
<option defaultValue="3">Bucharest</option>
<option defaultValue="4">Rome</option>
<option defaultValue="5">New York</option>
<option defaultValue="6">Miami</option>
<option defaultValue="7">Los Santos</option>
<option defaultValue="8">Sydney</option>
<option defaultValue="9">Piatra Neamt</option>
</Input>
</>
);
}
export default Example;
Tags Input
import React from "react";
// JavaScript library for creating Tags Inputs
import Choices from "choices.js";
// reactstrap components
import { FormGroup } from "reactstrap";
// Core Components
function Example() {
React.useEffect(() => {
new Choices("#badges", {
delimiter: ",",
editItems: true,
maxItemCount: 5,
removeItemButton: true,
placeholder: true,
placeholderValue: "+ Add",
});
}, []);
return (
<>
<FormGroup>
<input
defaultValue="Amsterdam,Sydney, Rome, Singapore"
id="badges"
type="text"
></input>
</FormGroup>
</>
);
}
export default Example;
Props
If you want to see more examples and properties please check the official Choices.js Documentation.
You can also check the Official Github Repository.