@commercetools-uikit/radio-input
Version:
A RadioInput represents a group of options where only one option can be selected at a time.
39 lines (38 loc) • 1.57 kB
TypeScript
import { type ChangeEventHandler, type FocusEventHandler, type ReactNode } from 'react';
import { type TInlineProps } from '@commercetools-uikit/spacings-inline';
export type TGroupProps = {
id?: string;
name?: string;
value: string | boolean;
onChange?: ChangeEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLLabelElement>;
onFocus?: FocusEventHandler<HTMLLabelElement>;
isDisabled?: boolean;
isReadOnly?: boolean;
hasError?: boolean;
hasWarning?: boolean;
horizontalConstraint?: 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
/** Pick the desired layout. Possible values are `stack` or `inline`, (= Radio.Option items will be
* wrapped with the `Spacing.Stack` or `Spacing.Inline` component)*/
direction?: 'stack' | 'inline';
/** Props uesed to configue the selected layout component that was picked via the `direction` property */
directionProps?: {
scale?: TInlineProps['scale'];
alignItems?: TInlineProps['alignItems'];
justifyContent?: TInlineProps['justifyContent'];
};
children: ReactNode;
/**
* Indicate if the value entered in the input is invalid.
*/
'aria-invalid'?: boolean;
/**
* HTML ID of an element containing an error message related to the input.
*/
'aria-errormessage'?: string;
};
declare const Group: {
({ horizontalConstraint, direction, directionProps, ...props }: TGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
displayName: string;
};
export default Group;