website·Indexed 43 days ago
https://f36.contentful.com/Searchable website documentation for F36 Contentful from https://f36.contentful.com/.
Popover component only if Menu, Autocomplete, and Multiselect do not cover your specific use case. Note that when using Popover, you are responsible for implementing all accessibility requirements for the content inside the popover.Modal component to request critical information or warn users about destructive actions. A basic implementation requires managing the isShown state and providing an onClose handler. The modal content is passed as a render function child, typically containing a Modal.Header and Modal.Content.function ModalBasicExample() {
const [isShown, setShown] = useState(false);
return (
<>
<Button onClick={() => setShown(true)}>Open modal</Button>
<Modal onClose={() => setShown(false)} isShown={isShown}>
{() => (
<>
<Modal.Header
title="Modal title"
subtitle="subtitle"
onClose={() => setShown(false)}
/>
<Modal.Content>
<Heading>First entry published!</Heading>
<Paragraph>To discover more, go to Space Home.</Paragraph>
</Modal.Content>
</>
)}
</Modal>
</>
);
}The Textarea component supports several state-based props and accessibility requirements:
isDisabled for disabled styles, isInvalid for error styles, and isReadOnly for read-only mode.name and id properties to meet keyboard standards.FormControl) and without a <label>, you must specify an aria-label.isRequired to indicate a required field.<FormControl.ValidationMessage> to display error messages.<Stack flexDirection="column">
<Textarea
defaultValue="I'm disabled Textarea"
isDisabled
name="value-1"
/>
<Textarea defaultValue="I'm invalid Textarea" isInvalid name="value-1" />
<Textarea
defaultValue="I'm read-only Textarea"
isReadOnly
name="value-1"
/>
</Stack>Form component is compatible with external form management solutions such as Formik and React Hook Form.Table.Cell in the header as sortable using the isSortable prop. Use the sortDirection prop to indicate the current sort state (Ascending, Descending, or false). You must implement the sorting logic via the onClick handler to reorder the data source.<Table.Cell
isSortable
onClick={() => handleSort({ column: 'name' })}
sortDirection={sorting && sorting.column === 'name' ? sorting.direction : false}
>
Name
</Table.Cell>Use FormControl to provide context (such as isRequired, isDisabled, isInvalid, and isReadOnly) to form elements. It utilizes compound components to provide visual hints and accessibility:
FormControl.Label: Required for accessibility; should be the first element in the structure.FormControl.HelpText: Additional information displayed below the input.FormControl.ValidationMessage: Error messages displayed below the input or help text.FormControl.Counter: Displays character counts for TextInput or Textarea components.function FormControlExample() {
return (
<FormControl isRequired>
<FormControl.Label>Name</FormControl.Label>
<TextInput />
<FormControl.HelpText>Please enter your first name</FormControl.HelpText>
</FormControl>
);
}searchProps object to the Multiselect component. You must implement the filtering logic within the onSearchValueChange callback.<Multiselect
searchProps={{
searchPlaceholder: 'Search spaces',
onSearchValueChange: (event) => {
const value = event.target.value;
const filtered = allItems.filter(item =>
item.toLowerCase().includes(value.toLowerCase())
);
setFilteredItems(filtered);
},
}}
// ... other props
>
{filteredItems.map((item) => (
<Multiselect.Option key={item} label={item} value={item} ... />
))}
</Multiselect>layout="scrollable" and isFirstColumnSticky on the Table component, and set the isSticky prop on the Table.Head component. To prevent double scrollbars, ensure the table is placed within a height-constrained container.Accordion.Item manages its own expanded state. To control the state externally, provide a boolean value to the isExpanded prop and handle state changes using the onExpand and onCollapse callbacks.function ControlledAccordionExample() {
const [accordionState, setAccordionState] = useState({
1: true,
2: false,
});
const handleExpand = (itemIndex) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: true }));
};
const handleCollapse = (itemIndex) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: false }));
};
return (
<Accordion>
<Accordion.Item
title="Item 1"
isExpanded={accordionState[1]}
onExpand={handleExpand(1)}
onCollapse={handleCollapse(1)}
>
<Text>Content for item 1</Text>
</Accordion.Item>
<Accordion.Item
title="Item 2"
isExpanded={accordionState[2]}
onExpand={handleExpand(2)}
onCollapse={handleCollapse(2)}
>
<Text>Content for item 2</Text>
</Accordion.Item>
</Accordion>
);
}