Published

RadioButton

Editable Example

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

() => {
  return (
    <RadioButton
      labelText="Radio button"
      name="radio0"
      value="radio0"
    />
  );
};

Prop	Default	Description	Value
checked `boolean`	–	Specify whether the <RadioButton> is currently checked	checked
defaultChecked `boolean`	–	Specify whether the <RadioButton> should be checked by default	defaultChecked
disabled `boolean`	–	Specify whether the control is disabled	disabled
onChange `(event: ChangeEvent<HTMLInputElement>,value: string \|number,name?: string) => void`	–	Provide an optional `onChange` hook that is called each time the value of the underlying `input` changes
value `string \|number`	–	Specify the value of the <RadioButton>
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
hideLabel `boolean`	–	Specify whether you want the underlying label to be visually hidden	hideLabel
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`	–		light
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)	required
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)	readOnly
inline `boolean`	–	Renders the input as inline element for horizontal forms	inline
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

RadioButton

RadioButton

Editable Example

checked

defaultChecked

disabled

onChange

value

helperText

labelText

formItemClassName

inputWrapperClassName

hideLabel

invalid

invalidText

additional

light

placeholder

id

name

required

readOnly

inline

addonBefore

addonAfter

components

On this page

References