Native HTML select element with icon support and validation states.
Basic Usage
import DInputSelect from '@dynamic-framework/ui-react';
function App() {
const [country, setCountry] = useState<Country>();
const countries = [
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' },
{ value: 'mx', label: 'Mexico' },
];
return (
<DInputSelect
label="Country"
options={countries}
value={country?.value}
onChange={setCountry}
/>
);
}
Props
onChange
(selectedOption: T) => void
Called when selection changes with the selected option object
Function to extract value from option object
Function to extract label from option object
Select size - ‘sm’ or ‘lg’
Enables floating label style
Examples
Basic
Custom Objects
With Icons
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
];
<DInputSelect
label="Select an option"
options={options}
onChange={(selected) => console.log(selected)}
/>
type User = {
id: number;
name: string;
};
const users: User[] = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' },
];
<DInputSelect<User>
label="Assign to"
options={users}
valueExtractor={(user) => user.id}
labelExtractor={(user) => user.name}
onChange={(user) => console.log(user.id, user.name)}
/>
<DInputSelect
label="Currency"
options={currencies}
iconStart="DollarSign"
onChange={setCurrency}
/>
TypeScript Interface
type DefaultOption = {
value: string | number;
label: string;
};
type Props<T> =
& BaseProps
& FamilyIconProps
& StartIconProps
& EndIconProps
& {
id?: string;
name?: string;
label?: string;
disabled?: boolean;
loading?: boolean;
invalid?: boolean;
valid?: boolean;
hint?: string;
floatingLabel?: boolean;
onBlur?: (event: FocusEvent) => void;
onIconStartClick?: (event: MouseEvent) => void;
onIconEndClick?: (event: MouseEvent) => void;
options: Array<T>;
value?: string | number;
size?: ComponentSize;
onChange?: (selectedOption: T) => void;
valueExtractor?: (item: T) => string | number;
labelExtractor?: (item: T) => string;
};
Basic Usage
import DInputRange from '@dynamic-framework/ui-react';
function App() {
const [value, setValue] = useState('50');
return (
<DInputRange
label="Volume"
value={value}
min="0"
max="100"
onChange={(e) => setValue(e.target.value)}
/>
);
}
Props
Shows filled track up to current value
onChange
ChangeEventHandler<HTMLInputElement>
Change handler
Example
<DInputRange
label="Price Range"
value={price}
min="0"
max="1000"
onChange={(e) => setPrice(e.target.value)}
/>
<DInputRange
label="Opacity"
value={opacity}
min="0"
max="1"
step="0.1"
filledValue={true}
onChange={(e) => setOpacity(e.target.value)}
/>
DSelect
Advanced select component powered by react-select with custom styling and icon support.
Basic Usage
import DSelect from '@dynamic-framework/ui-react';
function App() {
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
return (
<DSelect
label="Flavor"
options={options}
onChange={(option) => console.log(option)}
/>
);
}
Props
Inherits all props from react-select with additional customizations:
Disables the select (alias for isDisabled)
Shows clear button (alias for isClearable)
Shows loading state (alias for isLoading)
Enables search (alias for isSearchable)
Enables multi-select (alias for isMulti)
Menu width adjusts to content
Enables floating label style
Examples
Basic
Multi-select
Searchable
With Icons
Custom Components
<DSelect
label="Select option"
options={options}
onChange={handleChange}
/>
<DSelect
label="Select multiple"
options={options}
multi
onChange={handleChange}
/>
<DSelect
label="Search countries"
options={countries}
searchable
placeholder="Type to search..."
onChange={handleChange}
/>
<DSelect
label="Account"
options={accounts}
iconStart="User"
clearable
onChange={handleChange}
/>
<DSelect
label="Select with icons"
options={options}
components={{
Option: DSelect.OptionIcon,
SingleValue: DSelect.SingleValueIconText,
}}
onChange={handleChange}
/>
Custom Components
DSelect provides pre-built custom components:
DSelect.OptionCheck - Checkbox in optionsDSelect.OptionIcon - Icon in optionsDSelect.OptionEmoji - Emoji in optionsDSelect.SingleValueIconText - Icon with text for selected valueDSelect.SingleValueEmoji - Emoji for selected valueDSelect.SingleValueEmojiText - Emoji with text for selected value
<DSelect
options={[
{ value: 'us', label: 'United States', icon: 'Flag' },
{ value: 'ca', label: 'Canada', icon: 'Flag' },
]}
components={{
Option: DSelect.OptionIcon,
SingleValue: DSelect.SingleValueIconText,
}}
/>