Component Catalog — Input Components

Part of: Component Catalog See also: List Components | Layout Components

All form components are in src/components/Form/ and follow the IPAParamDefinition pattern:

• Receive ipaObject, onChange, metadata, objectName, and name props

• Automatically determine read-only state from metadata

• Handle value conversion and updates consistently

Basic Input Components

IpaTextInput

Single-line text input with automatic validation and read-only handling.

Import: import IpaTextInput from "src/components/Form/IpaTextInput"

Props:

Prop	Type	Description
dataCy	string	Test identifier
name	string	Field name (matches IPA attribute)
ipaObject	Record<string, unknown>	Current entity data
onChange	(obj: Record<string, unknown>) => void	Update handler
metadata	Metadata	Field metadata from API
objectName	string	Entity type name
rules?	RuleProps[]	Validation rules
helperTextMessage?	string	Helper text for required fields

<IpaTextInput
  dataCy="entity-settings-textbox-description"
  name="description"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="entityname"
/>

IpaTextArea

Multi-line text input. Props: Same as IpaTextInput.

<IpaTextArea
  dataCy="entity-settings-textarea-description"
  name="description"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="entityname"
/>

IpaPasswordInput

Password field with masked input. Props: Same as IpaTextInput, plus showPasswordButton?: boolean.

IpaNumberInput

Numeric input with optional min/max constraints.

Import: import IpaNumberInput from "src/components/Form/IpaNumberInput"

Additional Props:

Prop	Type	Description
minValue?	number	Minimum allowed value
maxValue?	number	Maximum allowed value
numCharsShown?	number	Width of input field

<IpaNumberInput
  dataCy="otp-settings-number-timestep"
  name="ipatokentotptimestep"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="otptoken"
  minValue={5}
  maxValue={2147483647}
/>

IpaTextContent

Read-only text display (not editable). Use for computed or immutable fields like unique IDs.

---

Selection Components

IpaCheckbox

Single boolean checkbox.

Additional Props:

Prop	Type	Description
altTrue?	string	Value when checked (default: true)
altFalse?	string	Value when unchecked (default: false)

<IpaCheckbox
  dataCy="hbac-settings-checkbox-usercategory"
  name="usercategory"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="hbacrule"
  altTrue="all"
  altFalse=""
/>

IpaCheckboxes

Group of checkboxes for multi-select from a predefined list.

Additional Props: options: { value: string; text: string }[]

<IpaCheckboxes
  dataCy="entity-settings-checkboxes-flags"
  name="flags"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="entityname"
  options={[
    { value: "option1", text: "Enable option 1" },
    { value: "option2", text: "Enable option 2" },
  ]}
/>

IpaCheckboxListWithFilter

Checkboxes with search/filter. For large lists where users need to find specific items.

Additional Props:

Prop	Type	Description
options	{ value: string; text: string }[]	Checkbox options
maxHeight?	string	Max height (default: "300px")

Features: Case-insensitive filtering, three-column layout, scrollable list.

<IpaCheckboxListWithFilter
  dataCy="auth-types-checkbox-list"
  name="ipauserauthtype"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="user"
  options={[
    { value: "password", text: "Password" },
    { value: "radius", text: "RADIUS" },
    { value: "otp", text: "Two-factor authentication" },
  ]}
  maxHeight="400px"
/>

IpaSelect

Dropdown selection from a list of options.

Additional Props:

Prop	Type	Description
options	string[]	Available options
variant?	"default" | "typeahead"	Visual variant
defaultValue?	string	Default selection

Important: Do NOT use variant="typeahead" in Settings pages.

<IpaSelect
  dataCy="entity-settings-select-type"
  name="ipatokenotptype"
  ipaObject={ipaObject}
  setIpaObject={recordOnChange}
  objectName="otptoken"
  metadata={props.metadata}
  options={["totp", "hotp"]}
/>

IpaToggleGroup

Toggle between two mutually exclusive options (e.g., “Anyone” vs “Specified”).

Additional Props:

Prop	Type	Description
options	{ label: string; value: string }[]	Toggle options
optionSelected	string	Currently selected label
setOptionSelected	(value: string) => void	Selection handler

const [userOptionSelected, setUserOptionSelected] = useState("Anyone");

<IpaToggleGroup
  dataCy="selinux-toggle-user-category"
  name="usercategory"
  ipaObject={ipaObject}
  onChange={recordOnChange}
  metadata={props.metadata}
  objectName="selinuxusermap"
  options={[
    { label: "Anyone", value: "all" },
    { label: "Specified users and groups", value: "" },
  ]}
  optionSelected={userOptionSelected}
  setOptionSelected={setUserOptionSelected}
/>

IpaDropdownSearch

Dropdown with search capability for large option lists.

Additional Props: options: string[], onSearch: (value: string) => void, onSelect?: (value: string) => void

IpaCalendar

Date picker component. Import: import IpaCalendar from "src/components/Form/IpaCalendar"

DateTimeSelector

Combined date and time selection. Import: import DateTimeSelector from "src/components/Form/DateTimeSelector"