🚧 This website is work in progress 👷
Components
Forms
Select

Select

Select

Editable Example

import { Select } from "@wfp/react";

() => {
  return (
    <Select
      helperText="This is a helper text"
      labelText="Label text"
    />
  );
};
PropDefaultDescriptionValue

defaultValue

string
–

Optionally provide the default value of the <select>

iconDescription

string
–

Provide a description for the twistie icon that can be read by screen readers

hideLabel

boolean
–

Specify whether the label should be hidden, or not

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

formItemClassName

string
–

Provide a custom className that is applied directly to the underlying <textarea> node

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

light

boolean
–

placeholder

string
–

Specify the placeholder attribute for the input

id

string
–

Provide a unique identifier for the control

name

string
–

Provide a name for the control

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

disabled

boolean
–

Specify if the control is disabled (sets aria-disabled as well)

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

SelectItem

Editable Example

import { SelectItem } from "@wfp/react";

() => {
  return <SelectItem />;
};
PropDefaultDescriptionValue

value

string |number
–

Specify the value of the <SelectItem>

className

string
–

Specify an optional className to be applied to the node

disabled

boolean
–

Specify whether the <SelectItem> should be disabled

hidden

boolean
–

Specify whether the <SelectItem> is hidden

text

string
–

Provide the contents of your <SelectItem>

SelectItemGroup

Editable Example

import { SelectItemGroup } from "@wfp/react";

() => {
  return <SelectItemGroup />;
};
PropDefaultDescriptionValue

children

React.ReactNode
–

Provide the contents of your <SelectItemGroup>

className

string
–

Specify an optional className to be applied to the node

disabled

boolean
–

Specify whether the <SelectItemGroup> should be disabled

label

string
–

Specify the label to be displayed

On this page

References