InputGroup

The InputGroup component is used to wrap an input field with a label and optional validation message. It integrates with a form context to display errors and handle disabled states.

Import

Phaselis exports one main component for InputGroup.

import { InputGroup } from "phaselis";

• InputGroup: Main Component import for InputGroup

Usage

Basic InputGroup

import { InputGroup, Textfield } from "phaselis";

const Example = () => {
  return (
    <InputGroup label="User Name">
      <Textfield name="username" rightIcon="User" />
    </InputGroup>
  );
};

export default Example;

Props

These properties can be applied to the component, offering options for labeling, optional validation messages, and custom styling for enhanced flexibility.

label required

string

The label text for the input group, displayed above the input field.

import { Textfield } from "phaselis";

<InputGroup label="Phone Number">
  <Textfield name="phone" maxLength={17} />
</InputGroup>

children required

ReactNode

React nodes to be rendered inside the input group, typically an input field.

import { Radio, RadioGroup } from "phaselis";

<InputGroup label="Payment Options">
  <RadioGroup name="paymentMethod" value="paypal">
    <Radio text="Credit Card" value="credit_card" />
    <Radio text="PayPal" value="paypal" />
    <Radio text="Bank Transfer" value="bank_transfer" />
    <Radio text="Cryptocurrency" value="crypto" disabled />
  </RadioGroup>
</InputGroup>

message

string

Optional message to be displayed below the input field, used for additional information or instructions.

import { Textfield } from "phaselis";

<InputGroup label="Iban Number" message="Enter your turkish IBAN">
  <Textfield name="iban" />
</InputGroup>

style

Name	Type	Description
container	ViewStyle	Style for the outer container view.
label	TextStyle	Style for the input label.
message	TextStyle	Style for the message/error text.

Custom styles for the InputGroup component.

import { Textfield } from "phaselis";

<InputGroup
  label="User Name"
  style={{
    container: {
      padding: 20,
      backgroundColor: "#b9e0ff",
    },
  }}
>
  <Textfield name="username" />
</InputGroup>

// Direct label styling
<InputGroup
  label="User Name"
  style={{ fontSize: 18, fontWeight: 'bold', color: '#0066cc', marginBottom: 10 }}
>
  <Textfield name="username" />
</InputGroup>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<InputGroup 
  label="Address" 
  containerStyle={{ marginBottom: 20, borderLeftWidth: 2, borderLeftColor: '#0066cc', paddingLeft: 10 }}
>
  <Textfield name="address" />
</InputGroup>

messageStyle

TextStyle

Additional style applied directly to the message/error text.

<InputGroup 
  label="Description" 
  message="Optional: Add additional details" 
  messageStyle={{ fontStyle: 'italic', color: '#888888' }}
>
  <Textfield name="description" />
</InputGroup>