Select Field

A dropdown list for selecting a single item. The SelectField component extends the Select element with description and validation variants.

A select field

Usage

import { SelectField } from "@newfold/ui-component-library";

<SelectField
    id="select-field-demo"
    label="A select field"
    value="1"
    selectedLabel="Option 1"
    onChange={handleChange}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Options

You can pass options to the component in two ways. You can pass them as children of the component or you can pass them as an array of objects to the options prop.

1. Options as Children

You can pass options as children to the component. Each child must be an instance of SelectField.Option sub-component. In this case changing the selectedLabel should be done manually in the handleChange function.

const [selectedVal, setSelectedVal] = useState("1");

const handleChange = (val) => {
    setSelectedVal(val);
};

<SelectField
    id='select-field-children'
    label = "A select field"
    value={selectedVal}
    selectedLabel={`Option ${selectedVal}`}
    onChange={handleChange}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

2. Options as Array

Use the options prop to pass in the options as an array of objects. In this case, displayed selectedLabel will be updated automatically on change.

const [selectedVal, setSelectedVal] = useState("1");

const handleChange = (val) => {
    setSelectedVal(val);
};

<SelectField
    id='select-field-array'
    label = "A select field"
    value={selectedVal}
    onChange={handleChange}
    options={[
      {
        label: 'Option 1',
        value: '1'
      },
      {
        label: 'Option 2',
        value: '2'
      },
      {
        label: 'Option 3',
        value: '3'
      },
      {
        label: 'Option 4',
        value: '4'
      }
    ]}
/>

Label

Use the label prop to add a label to the SelectField component.

This is a label

<SelectField
    id="select-field-label"
    label="This is a label"
    value="1"
    selectedLabel="Option 1"
    onChange={handleChange}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Description

Use the description prop to add a description to the SelectField component.

A select field

This is a description

<SelectField
    id="select-field-description"
    label="A select field"
    description="This is a description"
    value="1"
    selectedLabel="Option 1"
    onChange={handleChange}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Disabled

Use the disabled prop to disable the SelectField component.

A disabled select field

<SelectField
    id="select-field-disabled"
    label="A disabled select field"
    value="1"
    selectedLabel="Option 1"
    onChange={handleChange}
    disabled={true}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Validation

Use the validation prop to add validation to the SelectField component. The SelectField provides four validation variants: success, warning, info, and error.

Success

Success variant

Success unlocked. Keep soaring!

<SelectField
    id='select-field-success'
    value='1'
    selectedLabel='Option 1'
    label="Success variant"
    onChange={handleChange}
    validation={{
        variant: "success",
        message: "Success unlocked. Keep soaring!"
    }}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Warning

Warning variant

Caution: Proceed with care to avoid potential pitfalls.

<SelectField
    id='select-field-warning'
    value='1'
    selectedLabel='Option 1'
    label="Warning variant"
    onChange={handleChange}
    validation={{
        variant: "warning",
        message: "Caution: Proceed with care to avoid potential pitfalls."
    }}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Info

Info variant

Information: Knowledge is the key to empowerment.

<SelectField
    id='select-field-info'
    value='1'
    selectedLabel='Option 1'
    label="Info variant"
    onChange={handleChange}
    validation={{
        variant: "info",
        message: "Information: Knowledge is the key to empowerment."
    }}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Error

Error variant

Error: Unable to proceed without required input.

<SelectField
    id='select-field-error'
    value='1'
    selectedLabel='Option 1'
    label="Error variant"
    onChange={handleChange}
    validation={{
        variant: "error",
        message: "Error: Unable to proceed without required input."
    }}
>
    <SelectField.Option
        label="Option 1"
        value="1"
    />
    <SelectField.Option
        label="Option 2"
        value="2"
    />
    <SelectField.Option
        label="Option 3"
        value="3"
    />
    <SelectField.Option
        label="Option 4"
        value="4"
    />
</SelectField>

Props

Attribute	Type	Description	Default
id^*	`string` \|	-	-
value^*	`string` \| `number` \| `bool` \|	-	-
label^*	`string` \|	-	-
selectedLabel	`string` \|	-	-
name	`string` \|	-	-
description	`node` \|	-	-
options	`[{ value: string \| number \| bool, label: string }]` \|	Array of options to be rendered in the select field.	-
children	`node` \|	Alternative to options array. Pass `SelectField.Option` components as children.	-
validation	`{ variant: string, message: node }` \|	Validation state and message	-
disabled	`bool` \|	-	`false`
className	`string` \|	-	-

Usage​

Options​

1. Options as Children​

2. Options as Array​

Label​

Description​

Disabled​

Validation​

Success​

Warning​

Info​

Error​

Props​